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前 ”总 


现今 仍然 被 使 用 于 地 球 上 的 编程 语言 繁多 ， 可 分 别 实现 特定 任务 、 功 能 与 运作 逻辑 。 有 些 编 
程 语言 仅 被 内 建 于 特定 集成 开发 环境 (IDE, integrated development environment) ， 并 不 够 普及 。 现 


代 流 行 的 编程 语言 ， 例 如 JavaScript、Python、Java、C、C++、C#、PHP、SQL、R 等 ， 被 内 建 于 


由 不 同 软件 业者 提供 的 集成 开发 环境 里 ， 进 而 蔚 为 风潮 ! 
为 了 培养 稳定 流畅 的 编程 思维 逻辑 和 源 代 码 的 衔接 能 力 ， 程 序 开发 者 在 初学 阶段 逐渐 学 习 多 
种 编程 语言 ， 肯 定 是 必 经 之 路 ! 一 开始 挑选 现代 较为 流行 的 编程 语言 ， 可 获得 相当 多 的 学 习 资源 ， 


进而 大 幅 降低 所 耗费 的 心力 与 时 间 。 


JavaScript 编程 语言 从 20 多 年 前 问世 以 来 ， 逐 渐 风行 于 全 球 各 国 ! 如 今 被 内 建 于 不 同 软件 平 
台 上 的 许多 集成 开发 环境 中 ， 进 而 触及 更 为 宽广 、 更 多 层次 的 开发 领域 。 因 此 ， 很 多 较为 资深 的 程 


序 开发 员 通过 JavaScript 编程 语言 来 实现 多 种 应 用 程序 。 


希望 长 年 累 月 的 高 级 程序 开发 员 、 行 之 有 年 的 JavaScript 编程 工作 者 、 对 JavaScript 编程 有 兴 
趣 者 ， 甚 至 涉世 未 深 的 初学 者 ， 都 能 通过 本 书 极为 丰富 的 实战 示例 ， 提 升 自己 的 编程 技术 能 力 ! 

本 书 分 为 21 章 ， 从 基础 到 高 级 ， 主 要 闸 释 JavaScript 编程 各 层面 的 语法 、 观 念 、 实 战 示例 与 
习题 。 其 内 容 深入 浅 出 ， 包 括 如 下 所 有 的 实战 主题 : 


表达 式 (expression ) 与 运算 符 ( operator ) 

数据 类 型 ( data type ) 

条 件 ( condition ) 和 循环 (loop ) 语句 

函数 (function ) 与 方法 (method ) 

处 理 数值 (number )、 字符 串 (string)、 数组 (array )、 自 定义 对 象 (custom object / user-defined 
object ) 与 日 期 和 时 间 (date and time ) 

DOM (document object model ) 的 事件 处 理 器 (event handler ) 和 元 素 实 例 (element instance ) 
Reflect、Proxy 和 Intl 对 象 (object ) 

window.navigator、window.document 和 BOM (browser object model ) 对 象 实例 ( object 
instance ) 

类 (class ) 

错误 处 理 (errorhandling ) 

数据 的 验证 与 传输 ( data validation and transmission ) 

响应 式 机 制 (responsive mechanism ) 与 源 代码 加 密 (source-code encryption ) 
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另外 ， 本 书 的 源 代码 示例 文档 也 可 扫描 下 方 的 二 维 码 下 载 。 若 下 载 时 遇 到 问题 ， 请 将 标题 为 
【下 载 问题 一 一 JavaScript 编程 思想 : 从 ES5 到 ES9】 的 电子 邮件 发 送 至 741376828@qq.com， 后 
续 交 由 专员 为 您 排 困 解 难 。 


由 于 编者 水 平 有 限 ， 书 中 难免 存在 朴 漏 之 处 ， 奶 请 广大 读者 批评 指正 。 


柯 霖 迁 
2019 年 3 月 
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ECMAScript 简介 


本 章 内 容 主要 介绍 ECMAScript 的 历史 、 版 本 以 及 语法 特性 和 多 种 集成 开发 环境 ， 让 读者 对 
ECMAScript 有 一 个 初步 的 认识 ， 以 便 为 后 续 学 习 打 好 基础 。 


1.1 概 述 


成 立 于 1961 年 之 极 具 影 响 力 的 国际 组 织 ECMA(European Computer Manufacturers Association， 
欧洲 制造 商 协会 ), 现今 专门 制定 信息 和 通信 系统 的 标准 与 技术 报告 ， 以 促进 和 规范 信息 通信 技术 
与 消费 电子 产品 。 

ECMA 至 今 已 经 主动 贡献 了 超过 400 个 标准 和 100 个 技术 报告 ， 其 中 三 分 之 二 以 上 的 部 分 ， 
己 在 国际 上 得 到 了 广泛 的 使 用 。 其 中 , 由 Ecma 制定 的 ECMA-262(ISO/IEC 16262 ) 的 ECMAScript， 
是 具有 商标 的 脚本 编程 语言 (script programming language) 的 规范 。 


1.1.1 ” ECMAScript 各 版 本 


从 1997 年 6 月 的 第 1 版 到 2018 年 6 月 的 第 9 版 (ECMAScript 9) ， 已 问世 的 ECMAScript 
各 版 本 ,主要 被 用 来 标准 化 JavaScript 脚本 编程 语言 。 目 前 业界 的 应 用 主要 以 ECMAScript 516 为 
主 、ECMAScript7/8/9 为 辅 。 从 ECMAScript 6 开始 的 各 版 本 存在 如 表 1-1 所 示 的 昵称 。 


表 1-1 ECMAScript 的 各 版 本 


正式 名 称 版 本 昵称 缩写 昵称 

ECMAScript 2015 ECMAScript 6 ES2015、ES6 
ECMAScript 2016 ECMAScript 7 ES2016、ES7 
ECMAScript 2017 ECMAScript 8 ES2017、ES8 


ECMAScript 2018 ECMAScript 9 ES2018、ES9 
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1.1.2 关于 JavaScript 


可 简称 为 JS 的 JavaScript， 是 一 个 动态 高 级 解释 脚本 编程 语言 (dynamic high-level interpreting 
scripting programming language) 。 对 于 万 维 网 而 言 ，HTML、CSS 与 JavaScript 并 列 为 网 页 制作 的 
核心 编程 语言 。 

JavaScript 主要 用 来 实现 网 页 程序 的 用 户 交 互 机 制 (interactive mechanism ), 并 通过 ECMAScript 
规范 ， 被 创建 和 内 置 于 网 页 浏览 器 (web browser) 的 JavaScript 引擎 中 。 

JavaScript 支持 事件 驱动 (event-driven) 、 函 数 调用 (fonction invocation / call) 、 面 向 对 象 编 
程 (OOP, object-oriented programming ) 等 特性 , 并 具备 处 理 文本 、 数 组 、 日 期 、 正 则 表达 式 (regular 
expression ) 和 文档 对 象 模型 (DOM，document object model) 的 应 用 程序 编程 接口 (API, application 
programming interface) 。 

JavaScript 引擎 早期 仅 实现 于 网 页 浏览 器 当中 ， 现 今 则 被 实现 于 其 他 类 型 的 软件 里 ， 例 如 网 页 
服务 器 、 数 据 库 服务 器 、 文 字 处 理 器 ， 以 及 用 来 编写 移动 或 桌面 应 用 程序 的 集成 开发 环境 (IDE， 


integrated development environment) 等 软件 里 。 


1.1.3 ”其 他 脚本 语言 


通过 ECMAScript 规范 实现 的 编程 语言 , 除了 JavaScript 之 外 , 主要 还 有 Adobe 的 ActionScript 
和 Microsoft 的 JScript， 其 语法 非常 相似 于 JavaScript。 

JScript 被 用 于 Internet Explorer 浏览 器 ，ActionScript 主要 被 用 于 Adobe Animate CC 集成 开发 
环境 中 。 


1.2 语法 的 实现 


计算 机 编程 语言 的 语法 是 一 种 规则 ， 用 来 定义 此 编程 语言 表面 形式 的 符号 组 合 ， 以 正确 组 成 
此 语言 的 源 代码 (source code) ， 进 而 堆砌 成 为 片段 或 文件 。 


1.2.1 源 代码 


源 代 码 (source code) 通常 以 纯 文 本 方式 ， 存 在 于 文档 里 ， 并 作为 输入 数据 ， 由 汇编 器 
(assembler) 、 编 译 器 (compiler) 或 解释 器 〈interpreter) ， 转 换 成 计算 机 可 理解 的 二 进 制 机 器 代 
人 码 (machine code) 。 

通过 经 常 阅读 他 人 编写 的 源 代码 ， 计 算 机 程序 员 可 增进 其 编程 技术 的 成 熟 度 。 因 此 ， 开 发 者 
互相 分 享 源 代 码 ， 可 算是 对 彼此 的 一 种 贡献 。 

移植 特定 软件 到 其 他 计算 机 平台 上 ， 通 常 是 异常 困难 的 。 然 而 ， 若 有 此 软件 的 源 代码 ， 移 植 
任务 就 会 变 得 简单 许多 。 
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1.2.2 ”语句 


在 计算 机 编程 当中 ,语句 (statement) 是 命令 式 编程 语言 的 语法 单元 ， 以 表示 欲 指示 计算 机 进 


行 的 一 连 中 动作 。 


JavaScript 编程 语言 的 语句 大 致 分 为 简单 语句 (simple statement) 和 复合 语句 〈compound 


statement) 两 种 形式 。 


1. 简单 语句 
简单 语句 的 末尾 应 该 加 上 分 号 ， 例 如 : 
(1) 


let v01，v02 ， 

变量 v01 与 v02 的 声明 。 

(2) 

var list01 = ['apple', 'banana', 'cherry'] ; 

数组 变量 list01 的 声明 与 数据 设置 。 

(3) 

profile = {name: 'Alex', gender: 'male', age: '40'} ; 

对 象 变量 profile 的 数据 设置 。 

(4) 

document .writeln ('<h3>world peace</h3>') ; 

写 入 带 有 文本 “world peace” 的 h3 元 素 实例 到 当前 网 页 里 。 
(5) 

confirm ('Are You sure to delete it?') ; 

在 网 页 上 ， 显 示 带 有 “Are you sure to delete it? ”信息 并 带 有 确认 按钮 和 取消 按钮 的 模式 对 话 框 。 
(6) 


username.style.color = 'RoyalBlue' ; 


设置 id 为 username 元 素 实 例 的 颜色 样式 为 宝蓝 色 。 
(7) 


break ; 

中 断 循环 语句 (loop statement) ， 或 确认 切换 语句 〈switch statement) 的 分 支 (branch) 。 
(8) 

continue ; 

在 循环 语句 中 ， 终 止 当前 的 循环 ， 并 立即 进行 下 一 次 的 循环 。 

(10) 


debugger ; 
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设置 调试 断 点 〈breakpoint) ， 以 暂停 后 续 源 代 码 的 执行 ， 并 启动 调试 机 制 。 
和 全 

wuse strict™ ys 

限制 以 严格 模式 执行 源 代码 。 

(12) 

return result ; 

终止 函数 的 执行 ， 并 返回 变量 result 的 数据 。 

2. 复合 语句 

复合 语句 大 都 带 有 一 对 大 括号 ， 例 如 : 

(1) 


let result = 0， 

alert ("You're welcome!") ; 

{ 
let num01 = 75, num02 = 64 ; 
result = num01 + num02 ; 

} 


在 前 述 大 括号 中 的 源 代码 , 连同 大 括号 在 内 , 可 被 称 为 复合 语句 。 其 中 , 变量 num01 与 num02 
只 有 在 大 括号 里 才 允 许 被 访问 。 
(2) 
with (send button.style) 
{ 
color = "Gold' ; 
backgroundColor = 'DodgerBlue' 
fontSize = '1.5em' ; 
} 
with 复合 语句 包含 一 对 大 括号 ， 并 且 可 以 简化 对 象 实例 属性 的 访问 语法 。 在 此 ， 
【send_button.style.color= 'Gold' ; 】 的 语句 ， 在 复合 语句 【with (send_button.style) 】 的 大 括号 里 ， 
可 被 简化 为 【color='Gold' ;】。 
(32 


if (score >= 60) 
{ 
passer count++ ; 
saying = 'You have passed!' ; 


} 

这 条 件 复合 语句 可 包含 一 对 大 括号 ， 当 小 括号 里 的 条 件 【(score >= 60)】 为 真 时 ， 大 括号 里 的 
各 语句 就 会 被 执行 。 

(4) 

| 


Count++ 了 
sum += Count * 1 ** 2 ? 
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for 循环 复合 语句 可 包含 一 对 大 括号 , 并 借助 小 括号 【(leti=0;i<10;it+)】 中 的 3 个 子 语句 ， 
使 得 大 括号 中 的 各 语句 ， 可 被 欠 代 而 执行 10 次 。 
C5 


switch (choice) 
{ 
case 1: 
grade = 'At' ; 
break ; 
case 2: 
grade = 'A' } 
break ; 
case 3: 
grade = 'B' ; 
break ; 
case 4: 
grade = "CC 
break ; 
default: 
grade = '@ @' ; 
} 


switch 复合 语句 包含 一 对 大 括号 ， 并 通过 小 括号 【(choice)】 中 变量 choice 的 数值 ， 来 决定 并 
执行 大 括号 中 的 特定 case 或 default 分 支 的 子 语句 。 


1.2.3 ”表达 式 


编程 语言 中 的 表达 式 (expression) 内 含 运 算 符 (operator) 以 及 代表 操作 数 (operand) 的 常量 
(constant)、 变量 (variable)、 函数 返回 值 (function return value ) 与 子 表达 式 (subsidiary expression ) 。 

一 般 情 况 下 ， 表 达 式 的 结果 数据 通常 是 原始 数据 类 型 (primitive data type) 之 一 ， 例 如 数字 
(number) 、 字 符 串 〈string) 或 布尔 型 (boolean) 。 

JavaScript 编程 语言 的 表达 式 大 致 可 分 为 以 下 几 种 。 

1. 算术 表达 式 (arithmetic expression ) 


例如 : 

(1) v01=v02+5; 

将 变量 v02 的 数值 ， 加 上 5 之 后 的 结果 值 ， 赋 给 变量 v01。 

(2) v03= v02 **3; 

将 变量 v02 的 数值 ， 进 行 3 次 方 运算 的 结果 值 ， 赋 给 变量 v03。 

(3) v04=6*(v03+10); 

将 6 乘 以 【变量 v03 加 上 10】 之 后 的 积 ， 赋 给 变量 v04。 

(4) v05= v04 %2+v04/2; 

将 变量 v04 除 以 2 的 余数 ， 加 上 变量 v04 除 以 2 的 结果 值 ， 赋 给 变量 v05。 
(5) c01=c0l1+1; 
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将 变量 c01 的 数值 ， 加 上 1 的 结果 值 ， 赋 给 变量 c01 本 身 。 
(6) c01+=1; 
将 变量 c01 的 数值 增加 1/ 递增 (increment) 。 
(7) cO1++ ; 
先 返 回 c01 的 数值 ， 再 递增 变量 c01。 
(8) ++c01 ; 
先 递增 变量 c01 的 数值 ， 再 返回 c01。 
(9) c02=c02 - 1 ; 
将 变量 c02 的 数值 ， 减 去 1/ 递减 (decrement) 的 结果 值 ， 赋 给 变量 c02 本 身 。 
(10) c02 -=1; 
将 变量 c02 的 值 减 去 1/ 递减 的 结果 值 ， 赋 给 变量 c02 本 身 。 
(11) c02-- ; 
先 返回 c02 的 数值 ， 再 递减 变量 c02。 
(12) --c02 ; 
先 递减 变量 c02 的 数值 ， 再 返回 c02。 
2. 字符 串 表 达 式 (string expression) 
例如 : 
(1) 


let subject = 'Alex' ; 

let object = 'Uasper' ; 

let greeting = "'have a \"nice\" day'" ; 
let message = '' ; 


message = subject + ' said ' + greeting + ' to ' + object ; 

message = “${subject} said ${greeting} to ${object}. ; 

在 一 对 单 引号 或 双 引 号 内 的 文本 是 代表 一 种 常量 (constant) 的 字符 串 字 面 量 (string literal》。 
在 字符 串 字 面 量 里 的 单 引号 或 双 引 号 应 该 冠 上 反 斜 枉 back slash) 【\】， 成 为 【v] 或 【\"】。 
多 个 字符 串 字 面 量 可 通过 加 法 运算 符 【+】， 结 合成 为 新 的 字符 串 。 

通过 一 对 反 引 号 (back quote )【`】, 可 创建 模板 字面 量 (template literal) ， 并 内 含 语法 【${ 特 


定 变 量 的 名 称 }】， 以 动态 解析 特定 变量 的 数据 ， 成 为 新 字符 串 的 一 部 分 。 


在 前 述 源 代码 里 ， 最 后 两 行 具有 相同 的 效果 。 
(2) 


let sentence = 'Alice really \ 
lovingly loves \ 

lovely beloved of \ 

Jason very much.' ; 


借助 反 斜 杠 【\】 来 分 割 较 长 的 字符 串 字 面 量 。 
在 各 行 中 ， 字 符 串 片段 的 最 后 一 个 字符 必须 就 是 反 斜 杠 【\】〗， 不 可 以 再 有 包括 空白 字符 在 内 


的 其 他 字符 。 
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前 述 源 代码 被 执行 之 后 ， 变 量 sentence 的 数据 会 是 字符 串 "Alice really lovingly loves lovely 
beloved of Jason very much."。 
3. 关系 与 逻辑 表达 式 (relational and logical expression ) 
例如 : 
(1) 
x>y 
检验 若 变 量 x 的 数值 大 于 y 的 数值 ， 则 返回 布尔 值 true。 
(2) 


x <= yY && x <=2 

检验 若 变 量 x 的 数值 同时 小 于 或 等 于 变量 y 和 z 的 数值 ， 则 返回 布尔 值 true。 
(3) 

Se 7 记 

检验 若 变量 a 的 数值 大 于 0、 变 量 b 的 数值 大 于 0， 或 是 变量 c 的 数值 大 于 0， 则 返 [E 


true。 


布尔 值 


(4) 

! (v01 > 60 || v02 >= 90) && v03 >= 80 

检验 车 【并 非 变量 v01 的 数值 大 于 60, 或 是 变量 v02 的 数值 大 于 或 等 于 90】, 并 且 【 变 量 v03 
的 数值 大 于 或 等 于 80】， 则 返回 布尔 值 true。 

(5) 


name == "admin' && /^\w{6,}$/.test (password) 

检验 若 变量 name 的 数据 等 于 字符 串 字面 量 "admin", 并 且 变 量 password 的 数据 是 由 【0~ 9】、 
【大 小 写 a~z] 与 【下 夯 线 _】 所 构成 的 最 少 6 个 字符 的 字符 串 ， 则 返回 布尔 值 true。 

4. 主要 表达 式 (primary expression) 


例如 : 
(1) 


let circle area = function (r) 
{ 
let result ; 
result = Math.PI * r ** 2 
console.log (‘The circle area of radius ${r} = S$fresult} ) ; 
return result ; 


和 


在 所 谓 的 函数 表达 式 (function expression ) 中 , 通过 关键 字 function, 定义 匿名 函数 (anonymous 
function) ， 并 以 变量 的 名 称 circle_area， 作 为 匿名 函数 的 别名 (alias) 。 
(2) 


let Cubic = class 
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constructor (1, w, h) 

{ 
this.length = 1; 
this.width = ws; 
this.height = h ; 

} 


volume (1 = this.length, w = this.width, h = this.height) 
{ 

TOLUrn 让 和 

} 


surface area (1 = this.length, w = this.width, h = this.height) 
{ 
Fturn 丰 (2 
} 
i 


在 所 谓 的 类 表达 式 (class expression) 中 ， 通 过 关键 字 class， 定 义 匿 名 类 (anonymous class) ， 
并 以 变量 的 名 称 Cubic 作为 匿名 类 的 别名 。 
(3) 


let number list = [15, 30, 75, 90, 180] ; 

console.log (number list[2]) ; 

number list[5] = 770 ; 

这 3 个 语句 均 可 被 视 为 主要 表达 式 。 在 等 号 右 侧 ， 没 有 变量 名 称 的 一 对 中 括号 ， 是 用 来 定义 
数组 实例 [15, 30, 75, 90, 180]， 并 赋 给 等 号 左 侧 的 数组 变量 number_list。 在 等 号 左 侧 ， 变量 名 称 衔接 的 
一 对 中 括号 ， 则 用 来 访问 数组 变量 number_list 中 特定 索引 值 (2 与 5) 对 应 的 元 素 值 (75 与 770) 。 

(4) 

var User 4nput m= "Ei mL "2 + YL * 3+ :6.3 

Var pattern = /[a-zA-Z2]\d/g ; 

Var matches = user input.match (pattern) ; 

console.log (matches) ; 

这 4 个 语句 均 可 被 视 为 主要 表达 式 。 在 此 ， 通 过 一 对 斜 杠 符号 【/】， 创 建 用 来 匹配 特定 模式 
【由 字母 开头 ， 后 接 一 个 数字 的 文本 】 的 正则 表达 式 字 面 量 (regular-expression literal ) 
【/[a-zA-Z]\d/g】， 并 赋 给 等 号 左 侧 的 变量 pattern。 

5. 箭头 函数 表达 式 (arrow function expression) 

箭头 函数 表达 式 存在 如 下 几 种 形式 。 

(1) 

(参数 列 ) => { .…} ; 

通过 带 有 参数 列 的 一 对 小 括号 ， 衔 接 代表 箭头 符号 的 【=>】， 与 内 含 主 体 源 代码 的 一 对 大 括 
号 ， 以 定义 没有 名 称 、 但 可 带 有 多 个 参数 的 箭头 函数 (arrow function) 。 

(2) 

单一 参数 名 称 => { --} ， 
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通过 单一 参数 ， 衔 接 代 表 箭头 符号 的 【=>】， 与 内 含 主体 源 代码 的 一 对 大 括号 ， 以 定义 没有 
名 称 、 仅 有 一 个 参数 的 箭头 函数 。 

(3) 

单一 参数 名 称 => 单 一 语句 ， 

通过 单一 参数 ， 衔 接 代 表 箭头 符号 的 【=>】， 和 单一 语句 的 主体 源 代 码 ， 以 定义 没有 名 称 、 
仅 有 一 个 参数 和 语句 的 箭头 函数 。 

(4) 


通过 不 带 任何 参数 的 一 对 小 括号 ， 衔 接 代表 箭头 符号 的 【=>】， 与 内 含 主体 源 代 码 的 一 对 大 
括号 ， 以 定义 没有 名 称 和 参数 的 箭头 函数 。 

(5) 

() => 单一 语句 ， 

通过 不 带 任何 参数 的 一 对 小 括号 ， 衔 接 代表 箭头 符号 的 【=>】， 和 单一 语句 的 主体 源 代 码 ， 
以 定义 没有 名 称 与 参数 、 仅 有 单一 语句 的 箭头 函数 。 

6. 左 侧 表达 式 (left-hand expression) 


例如 : 
C1 


profile.name = "Jasper' ; 


通过 点 号 【.】， 将 字符 串 字 面 量 Jasper， 赋 给 变量 profile 的 实例 属性 name。 
(2) 


Profile['age'] = 28 ; 


普 助 一 对 中 括号 ， 将 整数 值 28 赋 给 变量 profile 的 实例 属性 age。 
(3) 


super (10，15) ; 

通过 关键 字 super 与 一 对 小 括号 ， 调 用 父 类 (parent class) 的 构造 函数 (constructor) ， 并 传 入 
参数 值 10 和 15。 

(4) 


super.cylinder volume (10, 15) ; 

借助 关键 字 super、 点 号 与 一 对 小 括号 ， 调 用 在 父 类 中 作为 成 员 函 数 (member function) 的 函 
数 cylinder_volume()， 并 传 入 参数 值 10 和 15。 

(5) 


在 等 号 的 左 侧 ， 设 置 变量 x， 并 将 变量 x 的 数值 加 上 3 的 结果 值 ， 赋 给 变量 x 本 身 。 
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(6) 
[a, bl] = [7, 13] ; 
在 等 号 的 左 侧 ， 编 写 内 含 变量 a 与 b 的 一 对 中 括号 ， 并 将 右 侧 另 一 对 中 括号 里 的 整数 值 7 与 
13， 分 别 赋 给 变量 a 与 b。 
(7) 


rc dj] = [a+3:b+7] 3» 


在 等 号 的 左 侧 , 编写 内 含 变 量 c 和 d 的 一 对 中 括号 ， 并 将 右 侧 另 一 对 中 括号 里 的 a+3 与 b+7 
的 结果 值 ， 分 别 赋 给 变量 a 与 b。 


1.2.4 ” 子 程 序 


在 计算 机 编程 中 ， 子 程序 (subroutine〉 也 可 被 称 为 函数 〈function) 或 方法 (method) ， 即 是 
可 重复 被 调用 (call /invocation) ， 以 重新 执行 特定 任务 的 一 连 串 程序 指令 单元 ， 进 而 节省 开发 与 
维护 的 成 本 ， 并 提高 质量 与 可 靠 性 。 

JavaScript 编程 语言 中 的 子 程序 ， 主 要 被 称 为 函数 ， 可 通过 以 下 语法 来 加 以 定义 。 

(1) 


function spherel(r) 

{ 
values = {}) 
values.volume = 4 / 3 * Math.PI * Math.pow(r, 3) ; 
values.surface area = 4 * Math.PI * r*r; 


return values ; 


} 

上 述 源 代码 是 定义 函数 的 标准 语法 。 通 过 调用 【sphere(10)】》， 可 计算 并 返回 【内 含 半径 为 10 
的 球体 积 和 球体 表面 积 】 相 关 数 据 的 对 象 实例 。 

(2) 


display = function () 
{ 
console.log('Variable-type displaying.') ; 
于 
上 述 源 代码 是 所 谓 的 函数 表达 式 ， 使 得 变量 display 具备 函数 的 特征 。 通 过 调用 【display0】， 
可 在 网 页 浏览 器 的 调试 工具 【Console】 面 板 中 ， 显 示 【Variable-type displaying】 的 信息 。 
(3) 


sphere volume = 工 => { return 4 / 3 * Math.PI * Math.pow(r, 3) } ; 


上 述 源 代码 中 的 简洁 语法 , 等 同 于 定义 了 函数 sphere_volume()。 通 过 调用 [ sphere_volume(30)】， 
可 计算 并 返回 半径 为 30 的 球体 积 的 结果 值 。 
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1.2.5 ”注释 


在 源 代 码 里 ， 注 释 (comment) 是 用 来 辅助 程序 员 ， 加 以 理解 各 源 代 码 片段 的 意义 和 用 途 ， 却 
不 会 被 计算 机 加 以 执行 的 文本 。 

JavaScript 编程 语言 的 注释 方式 有 如 下 两 种 。 

(1) 在 注释 文本 的 行 首 ， 加 上 紧 连 的 两 个 斜 杠 符号 【/】。 例 如 : 


// calculate the summary values for bonus table. 


(2) 在 注释 文本 的 开头 ， 加 上 紧 连 的 斜 杠 符号 与 星 号 【/*】， 并 在 注释 文本 的 末尾 ， 加 上 紧 
连 的 星 号 与 斜 杠 符号 【*/】。 例 如 : 


/* 
cal(lr) calculates circle area of radius r. 
ssa(r) calculates sphere surface area of radius r. 
cv(r, h) calculates cylinder volume of radius r and height h. 
部 天 


1.2.6 ”关键 字 


在 计算 机 编程 语言 中 ， 被 称 为 保留 字 (reserved word) 的 关键 字 (keyword) ， 不 能 或 不 应 该 
作为 常量 、 变 量 、 属 性 、 函 数 / 方法 的 标识 符 (identifier) / 名 称 (name) 的 词汇 。JavaScript 编 
吾 言 的 关键 字 如 表 1-2 所 示 。 


表 1-2 JavaScript 的 关键 字 
关键 字 关键 字 关键 字 关键 字 关键 字 
aa Er J -| 


const debugger default delete 


do double else enum eval 
float for function goto if 
implements MW Infinity instanceof 


int long NaN 
native package Private 
protected public return short static 
super switch synchronized this throw 
throws transient true try typeof 
undefined var void volatile while 


with yield 
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1.3 开发 环境 


目前 ， 知 名 的 JavaScript 集成 开发 环境 (IDE，integrated development environment) 有 如 下 几 种 。 


1. 存在 免费 版 本 的 


® Visual Studio Community 或 Visual Studio Code 
https://www.visualstudio.com/zh-hans/downloads 
® Eclipse 
http://www.eclipse.org/downloads/eclipse-packages 
® IntelliJ IDEA 
https://www.jetbrains.com/idea 
® NetBeans IDE 
https://netbeans.org 
® Sublime Text 
https://www.sublimetext.com 
e AtomIDE 
https://ide.atom.io 
® Brackets 
http://brackets.io 
@ Cloud9 (在 线 系统 ) 
https://aws.amazon.com/cn/cloud9 
@ ”Codeanywhere (在 线 系统 ) 


https://codeanywhere.com 


2. 仅 有 付费 版 本 的 

® WebStorm 
https://www.jetbrains.com/webstorm 

® KomodoIDE 
https://www.activestate.com/komodo-ide 


JavaScript 编程 语言 主要 用 于 开发 网 页 相关 应 用 程序 ， 所 以 ， 网 页 浏览 器 成 为 执行 与 调试 


JavaScript 源 代码 的 主要 软件 。 
因此 ， 上 述 各 个 集成 开发 环境 所 产生 的 内 含 JavaScript 源 代码 的 网 页 应 用 ,1 
览 器 或 其 他 内 置 JavaScript 引擎 的 软件 上 ， 被 进行 必要 的 调试 与 执行 。 


最 终 仍然 在 网 页 浏 
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1.3.1 浏览 器 


网 页 浏览 器 (web browser) 是 用 来 检索 与 呈现 网 络 上 信息 资源 (文本 信息 、 图 像 、 音 频 、 视 
频 、 动 画 ) 的 软件 ,现今 较 流行 的 网 页 浏览 器 为 Google Chrome、Mozilla Firefox、Opera、 Apple Safari、 


与 Microsoft Edge。 


上 述 的 网 页 浏览 器 皆 内 置 JavaScript 调试 工具 。 以 Google Chrome 浏览 器 为 例 ， 启 动 Chrome 


9-3-2-debugging..js?random=403 x | 六 


1 let radius = 19，height = 15 ; 
2 let result = @ 3 
3 


4 result = Math.PI * (radius ** 2) * 
5| console.logkresult) ; 


并 按 下 Ctrl+ Shift+I/ 丁 快捷 键 之 后 ， 即 可 看 到 如 图 1-1 所 示 的 开发 者 工具 调试 窗 格 。 


A++ 9 
| © Debugger paused 

> Watch 

v Call Stack 


(anonymous) 


9-3-2-debugging..s?random=403:7 | 


9 result = 2 * Math.PI * radius ** 
19 console.1log(result) ; 

11 

12 debugger ; 

13 


14| result = 4 / 3 * Math.PI * radius ** 3 ;3 


15 | console.log(result) ; 
16 


v Scope 
VScript 

height: 15 

radius: 19 

result: 4712.38898938469 
* Global window 国 


Y Breakpoints 


17| debugger ; 
18 No breakpoints 


> XHR/fetch Breakpoints 
上 DOM Breakpoints 


“2; 


{} Line5,Column 12 


图 1-1 
为 了 能 顺利 显示 其 JavaScript 源 代码 于 调试 窗口 中 ， 可 执行 如 下 操作 步骤 。 
步骤 014 在 Chrome 浏览 器 ， 打 开 配 书 源 代码 示例 文档 中 的 网 页 文档 【js_testerhtml js 


未 选择 任何 文件 


步 又 024 按 Ctrl + Shift+1 快捷 键 ， 启 动 【 开 发 者 工具 】]， 并 可 看 到 默认 显示 的 Console ( 控制 合 ) 
窗口 。 


Elements Console Sources Network » ?让 秆 
Default levels Y 六 


vv | Filter 


步 又 03 4 请 先 按 Ctrlt R 快捷 键 , 以 刷新 页 面 , 再 单 击 网 页 中 的 【选择 文件 ] 按钮， 并 选择 JavaScript 
源 代码 文档 【js / 19-3-2-debugging- mechanism.js 】 之 后 ， 可 在 按钮 右 侧 ， 明 确 看 到 被 选 定 的 文档 名 


称 和 【 Paused in debugger 】 信 息 。 


Paused in debugger | As 


步 又 044 观察 调试 窗口 的 变化 ， 从 【 Console 】 面 板 ， 自 动 切换 至 【 Source 】 面 板 中 


o 
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被 读 取 的 【19-3-2-debugging-mechanism.js】 内 含 的 源 代码 片段 【debugger ;】 用 来 设置 调试 断 
点 (debugging breakpoint) ， 使 得 浏览 器 启动 调试 机 制 ， 进 而 自动 切换 至 【Source】 面 板 中 ， 并 在 
第 1 个 断 点 上 ， 暂 停 JavaScript 源 代码 的 执行 ， 如 图 1-2 所 示 。 


引 9-3-2-debugging,..mjs?random=53 x | » 


1| let radius = 10, height = 15 ; 
2| let result = 8 ; 

3 

4 result = Math.PI * (radius ** 2) * height ; 
5| console.log(result) ; 


9 result = 2 * Math.PI * radius ** 2 + 2 * Matl 
19| console.log(result) ; 

11 

12| debugger ; 

13 

14| result = 4 / 3 * Math.PI * radius +** 3 ; 

15| console.log(result) ; 

16| 4 上 


{} Line7,Column1 
图 1-2 


关于 JavaScript 源 代码 的 相关 调试 ， 笔 者 将 深入 说 明 于 本 书 19.3 节 。 

关于 操作 扩展 名 亦 为 【.js】 的 【其 他 】 示 例文 档 ， 请 完成 至 前 述 第 3 步 即 可 。 至 于 操作 扩展 
名 为 【.html】 的 示例 文档 ， 则 直接 通过 浏览 器 ， 加 载 并 浏览 其 网 页 内 容 。 

接着 , 观察 特定 扩展 名 为 【.html ] 的 示例 文档 , 出 现在 浏览 器 中 的 网 页 内 容 , 以 及 在 【Console】 


面板 里 的 对 应 信息 ， 


可 进一步 理解 各 个 HTML、CSS 和 JavaScript 源 代 码 片 段 的 工作 原理 。 


1.3.2 Node.js 


如 同 【ASP.NET】 并 非 代 表 扩展 名 (file extension) 为 【.NET]】 的 文档 名 称 一 样 ，Nodejs 实 
际 上 亦 不 是 代表 JavaScript 源 代 码 的 文档 名 称 ， 而 是 开源 且 跨 平台 的 运行 期 环境 (run-time 
environment) ， 并 用 于 执行 服务 器 端的 JavaScript 源 代 码 ， 以 生成 动态 的 网 页 内 容 。 


因此 ， 对 于 3 


E 要 借助 JavaScript 编程 语言 ， 整 合 前 端 〈front-end) 与 后 端 (back-end) Web 应 


用 程序 开发 的 任务 而 言 ，Nodejs 如 今 已 然 成 为 基本 要 素 之 一 。 此 外 ，Nodejs 具备 事件 驱动 
(Cevent-driven) 的 运行 架构 ， 可 实现 数据 异步 的 传递 与 接收 ， 进 而 优化 Web 应 用 程序 的 处 理 能 力 


和 扩充 灵活 性 。 


1.3.3 其 他 JavaScript Shell 


通过 特定 JavaScript Shell 的 协助 ， 可 在 不 刷新 特定 网 页 内 容 的 情况 下 ， 辅 助 开发 与 调试 
JavaScript 源 代码 。 较 有 名 的 JavaScript Shell 有 如 下 几 种 : 


第 1 章 ECMAScript 简介 


15 


® Nodejs 
https://nodejs.org 

e JSDB 
http://www.jsdb.org 


® JavaLikeScript 
http://javalikescript.free. 人 fr 

® GLUEscript 
http://gluescript.sourceforge.net 


® jspl 
http://ispl.msg.mx 
® ShellJS 


http://documentup.com/shelljs/shelljs 


1.4 练 习 题 


. 截至 2018 年 ， ECMAScript 总 共有 几 个 版 本 ? 


. 可 被 并 列 为 网 页 制作 的 核心 编程 语言 ， 除 了 JavaScript 之 外 ， 还 包括 什么 语言 ? 


1 
2 
3. 网 页 浏览 器 相对 应 的 英文 短语 是 什么 ? 
4 


. 除了 JavaScript 之 外 ， 通 过 ECMAScript 规范 实现 的 编程 语言 主要 还 有 哪 两 个 ? 


5. 依 序 翻译 在 编程 语言 中 的 专 有 名 词 : machine code、source code、programming language、 


syntax、subroutine、variable 、constant 和 invocation 。 


6. 依 序 翻译 在 编程 语言 中 的 专 有 名 词 : assembler、compiler 和 interpreter。 


7. 在 如 下 的 源 代码 片段 里 ， 有 哪些 简单 语句 ? 


with (send button.style) 

{ 
color = 'Gold' ; 
backgroundColor = 'DodgerBlue' ; 
fontSize = '1.5em' ; 


} 
8. 在 如 下 的 源 代 码 片 段 里 ， 有 哪些 简单 语句 ? 


Or (Lot 0 
{ 

count++ 3? 

Sun += -Count * 4 ** 23 


} 
9. 在 如 下 的 源 代码 片段 里 ， 哪 些 应 该 是 变量 的 名 称 ? 


message = subject + ' said ' + greeting + ' to ' + object ; 


10. 在 源 代码 中 的 表达 式 里 ， 哪 些 可 以 作为 操作 数 ? 
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11. 在 如 下 源 代码 片段 里 ， 存 在 哪些 不 同 的 运算 符 ? 
! (vol > 60 11 v02 >= 90) ss v03 >= 80 
12. 在 如 下 源 代码 片段 里 ， 存 在 哪些 不 同 的 常量 


let number list = [15, 30, 75, 90, 180] ; 
console.log (number list[2]) ; 
number list[5] = 770 ; 


13. 在 如 下 源 代码 片段 里 ， 存 在 哪些 不 同 的 常量 


let user input = 'zl = xl ~ 2+yl*3+6'; 
let pattern = /[a-zA-Z]\d/g ; 

let matches = user input.match (Pattern) ; 
console.log (matches) ; 


14. 在 JavaScript 语言 里 ， 如 何 调 用 如 下 被 定义 的 函数 ， 进 而 将 半径 为 50 的 球体 积 和 球体 表 


面积 ， 赋 给 变量 result? 


function spherel(r) 

{ 
values = {};，; 
values.volume = 4 / 3 * Math.PI * Math.pow(r, 3) ; 
values.surface area = 4 * Math.PI * r*r; 
return values ; 


} 
15. 在 JavaScript 语言 里 ， 下 列 哪些 可 以 作为 变量 的 名 称 ? 
catchup、 extends、 finally、 super、 class、 import、 export 和 throw 


16. 特定 网 页 被 浏览 于 Google Chrome 浏览 器 窗口 内 时 , 有 什么 方式 可 以 快速 显示 出 浏览 器 开 


发 者 工具 的 Console 面板 ? 


表达 式 与 运算 符 


本 章 内 容 主 要 介绍 构成 表达 式 的 要 素 ， 包 括 常 量 、 变 量 、 子 表达 式 、 函 数 的 返 
操作 数 ， 以 及 多 种 不 同 的 运算 符 。 


值 等 形式 的 


2.1 操作 数 


编程 语言 中 的 表达 式 主要 由 操作 数 (operand) 和 运算 符 〈operator) 构成 。 其 中 ， 操 作 数 可 以 
是 常量 (constant) 、 变 量 (variable) 、 子 表达 式 (subsidiary expression ) 或 是 特定 函数 (function) 
的 返回 值 (return value) 。 


2.1.1 常量 (ES6) 


在 各 种 编程 语言 中 ， 常 量 (constant) 是 指 固定 而 明确 的 数据 。 例 如 : 

(1) 整数 (integer) 常量 : 25、770、-110。 

(2) 浮 点 数 (floating-point number) 常量 : 25.625、-23.71、Math.PI、Math.LN2、Math.SQRT2。 

(3) 字符 串 (string)〉 的 字面 量 (literal) : 'Alex'、"Happily Ever After"、 =.=+'。 

(4) 正则 表达 式 (regular expression) 的 字面 量 : 人 wt\s*.(\w\d+){1,3}/g、/ 八 w {2}\d{5}\s*$/。 

(5) 布尔 (boolean) 常量 : true、false。 

(6) 原始 (primitive) 常量 : NaN、null、undefined。 

(7) 编程 人 员 在 源 代码 中 ， 自 行 声明 (declare / declaration〉 的 常量 ， 可 简称 为 自 声明 常量 。 
例如 在 源 代码 片段 【const num01 = 157, num02= 268;】 中 ，num01 和 num02 即 是 自 声明 常量 。 


关于 自 声明 常量 ， 可 参考 如 下 示例 。 
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【2-1-1-constants.js】 


Const E = 299792458 ; 


console.log('Speed of light is greater than 2.9E8?', E > 2.9e8) ; 


【相关 说 明 】 


const E = 299792458 ; 


声明 数值 为 299792458 的 常量 E。 


console.log('Speed of light is greater than 2.9E8?', E > 2.9e8) ; 


在 浏览 器 调试 工具 的 【Console】 面 板 里 显示 出 【Speed of light is greater than 2.9E8? true】 的 信 


息 。 其中，2.9e8 代表 2.9X108， 也 就 是 290000000。 所 以 ，【E > 2.9e8】 等 价 于 【E>290000000】， 
会 返回 布尔 值 ttue， 这 是 因为 自 声明 常量 E 的 数值 为 299792458， 大 于 290000000。 


运 


2. 


位 


在 上 述 简短 的 源 代码 中 ， 常 量 E 刻意 被 声明 成 整数 常量 299792458， 因 此 常量 E 在 源 代码 的 
行 期 间 ， 不 可 被 变更 为 其 他 数据 。 


1.2 变量 (ES6) 
在 各 种 编程 语言 中 ， 变 量 (variable) 的 标识 符 (identifier) /名 称 Cname) 用 来 识别 特定 存储 


置 中 的 可 变数 据 。 lie 是 指 在 运行 期 间 ， 其 数据 是 可 被 变更 的 。 
在 JavaScript 语言 中 ， 变 量 的 作用 范围 (scope〉 大 致 可 如 下 区 分 : 


e@ 全 局 (global ) 范围 
@ 局 部 (local) 范围 
@ 块 (block) 范围 


下 面 通过 示例 ， 介 绍 如何 运 用 全 局 范围 和 局 部 范围 的 变量 。 
【2-1-2-e1-global-and-local-scope-variables.js】 


let start = 123 ? 
const STEP = 3; 
Var result = 0 


function some steps(step count = 1) 
{ 
Var output ; // or let output ; 


output = start + STEP * step count ; 


console.log (“in function: start = ${start}, STEP = ${STEP}, result = ${result} ) ; 
console.log(‘in function: output = ${output}\n\n) ; 


return output ; 
} 


result = some steps(5) ; 
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console.1log(`outer: start = ${start}, step = ${STEP}, result = ${fresult} ) ; 
console.log(`outer: output = ${output} ) ; 


【相关 说 明 】 


let start = 123 3 
Const STEP = 33 
Var result = 0;， 


声明 全 局 范围 的 变量 start 与 result， 以 及 全 局 范围 的 自 声明 常量 STEP。 既 然 是 全 局 范围 的 变 
量 和 常量 ， 即 可 让 后 续 的 任意 表达 式 ， 加 以 访问 。STEP 是 一 个 常量 ， 所 以 在 后 续 的 源 代码 里 ， 无 
function some steps(step count = 1) 


{ 
var output ; // or let output ; 


output = start + STEP * step count ; 


console.log(‘in function: start = ${start}, step= ${STEP}, result = ${fresult} `) ; 
console.log(“in function: output = ${output}\n\n’) ; 


return output ; 


} 

定义 函数 some_steps(), 并 在 内 部 声明 局 部 范围 的 变量 output。 既然 是 局 部 范围 的 , 变量 output 
只 能 在 函数 some_steps() 内 部 被 访问 ,变量 output 接 着 被 赋 子 【[ 带 有 全 局 范围 变量 start 和 常量 STEP】 
的 表达 式 的 结果 值 。 这 个 函数 内 部 的 多 条 语句 ， 访 问 了 全 局 范围 的 变量 start、 常 量 STEP， 以 及 局 
部 范围 的 变量 output 。 


result = some steps(5) ; 
console.1log(`outer: start = ${start}, step= ${STEP}, result = S${result} ) ; 


访问 全 局 范围 的 变量 start、result 与 常量 STEP。 

console.log(“outer: output = ${output}) ; 

因为 访问 了 函数 some_steps() 内 的 局 部 范围 的 变量 output， 所 以 会 显示 出 错误 信息 【Uncaught 
ReferenceError: output is not defined】。 

关于 块 范围 的 理解 ， 可 参考 如 下 示例 。 


【2-1-2-e2-block-scope-variables.js】 


// different heights measured in meters. 
{ 

// height of the building. 

let height = 100 ; 


{ 
// height of one floor. 
let height = 4 ; 


{ 
// height of a room. 
let height = 3 ; 
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【相关 说 明 】 


此 为 第 1 层 大 括号 内 的 块 范围 变量 height, 所 以 第 1 层 大 括号 之 外 的 语句 是 访问 不 到 的 。 声明 
块 范围 的 变量 ， 必 须 通过 关键 字 let 才 行 ， 由 关键 字 var 声明 的 变量 ， 只 会 成 为 全 局 范围 或 局 部 范 
变量 。 在 此 ， 可 将 此 层 块 范围 的 变量 height 视 为 建筑 物 的 高 度 。 


此 为 第 2 层 大 括号 内 的 块 范围 变量 height, 因此 第 2 层 大 括号 之 外 的 语句 是 访问 不 到 的 。 在 此 ， 
可 将 此 层 块 范围 的 变量 height， 视 为 建筑 物 特定 楼 层 的 高 度 。 


此 为 第 3 层 大 括号 内 的 块 范围 变量 height, 因此 第 3 层 大 括号 之 外 的 语句 是 访问 不 到 的 。 在 此 ， 
可 将 此 层 块 范围 的 变量 height， 视 为 特定 楼 层 中 特定 房间 的 高 度 。 


此 为 第 4 层 大 括号 内 的 块 范围 变量 height, 因此 第 4 层 大 括号 之 外 的 语句 是 访问 不 到 的 。 在 此 ， 
可 将 此 层 块 范围 的 变量 height， 视 为 特定 房间 中 特定 桌子 的 高 度 。 


通过 此 源 代码 片段 ， 可 供 读者 调试 出 每 层 块 范围 变量 height 的 对 应 值 。 


测试 此 源 代码 片段 ， 可 看 出 通过 关键 字 var 声明 的 变量 m 与 n， 在 带 有 大 括号 的 for 循环 语句 
结束 之 后 ， 依 然 可 以 被 访问 到 。 这 也 就 意味 着 ， 关 键 字 var 声明 的 ， 无 法 成 为 块 范围 的 变量 。 
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console.1log(`kernel count = (${i},${j})*) ; 
} 
console.1log(`inner count = (${i},${j})\n\n) ; 
} 
// console.log(‘outer count = (${i},${j})*) ; 
测试 此 源 代码 片段 ， 可 看 出 通过 关键 字 let 声明 的 变量 m 与 n， 只 能 被 访问 于 for 循环 语句 大 
括号 内 的 块 范围 里 。 这 也 就 意味 着 ， 关 键 字 let 声明 的 ， 可 以 成 为 块 范围 的 变量 。 复 原 最 后 一 行 成 
为 注释 的 语句 ， 并 进行 测试 之 后 ， 可 在 网 页 浏览 器 的 调试 工具 【Console】 面 板 中 ， 看 到 因为 访问 
不 到 块 范围 变量 i 与 j 的 错误 信息 。 
关于 特殊 变量 的 理解 ， 可 参考 如 下 示例 。 


【2-1-2-e3-special-variables.js】 


document .body.style.backgroundColor = 'RoyalBlue' ; 
console.log (document .body.style.backgroundColor) ; 
document .body.style.fontSize = '3em' }; 
console.log (document .body.style.fontSize) ; 

file selector.style.color = "Gold' ; 

console.log (file selector.style.color) ; 


file_selector.style.zoom = 2;， 


【相关 说 明 】 


file_selector.style.zoom = 2 


此 语句 中 的 子 属性 zoom， 因 为 可 被 设置 新 数据 ， 所 以 算是 变量 的 一 种 ， 然 而 ， 此 语句 中 的 子 
属性 style， 则 无 法 被 设置 新 数据 ， 也 因此 算是 常量 的 一 种 。 

通过 JavaScript 语法 ， 可 访问 文档 对 象 模型 (DOM, document object model) 中 的 特定 元 素 实例 
Celement instance) 。 元 素 实例 可 内 含 常 量 属性 ， 只 可 被 读 取 其 数据 ， 而 不 允许 被 写 入 新 数据 。 下 
面 举 出 4 个 元 素 实例 中 的 常量 属性 : 
file_selector.style 
document.body.style 


document.body 


pe 


window.document ( 可 被 简写 为 document) 


以 下 可 变更 数据 的 是 字符 串 (string〉 类 型 的 属性 ， 亦 是 网 页 浏览 器 内 置 的 ， 所 以 可 认为 是 网 
页 程序 在 运行 时 的 特殊 变量 : 


document.body.style.backgroundColor 


document.body.style.fontSize 


file_selector.style.color 


file_selectorstyle.zoom 
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2.1.3 子 表 达 式 


一 般 而 言 , 特定 表达 式 可 再 分 割 成 为 子 表达 式 (subsidiary expression) 。 关 于 子 表 达 式 的 运用 ， 
请 参考 如 下 示例 。 


【2-1-3-subsidiary-expressions.js】 


Varz= 10 
Var Volume = 4 / 3 * Math.PI * Math.pow(r, 3) ; 


circumference = r => 2 * Math.PI * rr; 

circle area = r => Math.PI * Math.pow(r, 2) ; 

sphere volume = => 4/ 3* Math.PI * Math.pow(r, 3) ; 

cylinder volume = (r, h) => circle area(lr) * h; 

Cylinder surface area = (r, h) => 2 * circle areal(r) + circumference(r) * h; 
rounded circle area = circle area(10).toFixed(3) ; 

rounded cylinder volume = cylinder volume (10, 20).toFixed(3) ; 

rounded cylinder surface area = cylinder surface area(10, 20).toFixed(3) ; 
console.log (rounded circle area) ; 


console.log (rounded cylinder volume) ; 
console.log (rounded cylinder surface area) ; 


【相关 说 明 】 

Var 工 王 10 7 

此 语句 内 含 左 侧 表 达 式 。 

Var volume = 4 / 3 * Math.PI * Math.pow(r, 3) ; 
此 主要 表达 式 内 含 如 下 子 表达 式 : 

@ 左 侧 表达 式 :【var volume =】 和 【Math.】 

@ ”算术 表达 式 :【413* MathPI* Math.pow(r, 3)】 
@ 主要 表达 式 :【Math.PI】 和 【Math.pow(r, 3)】 


circumference = r => 2 * Math.PI * r; 

此 主要 表达 式 内 含 如 下 子 表达 式 : 

左 侧 表达 式 :【circumference =】 和 【Math.】 
箭头 函数 表达 式 :【〖r=> 2 * Math.PI *r】 
算术 表达 式 :【2* Math.PI * r】 

主要 表达 式 :【Math.PI】 


circle area = r => Math.PI * Math.pow(r, 2) ; 


此 表达 式 内 含 如 下 子 表达 式 : 
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左 侧 表达 式 :【circle_area=】 和 【Math.】 

箭头 函数 表达 式 :【r=> Math.PI* Math.pow(r, 2)】 
算术 表达 式 :【Math.PI* Math.pow(r, 2)】 

主要 表达 式 :【Math.PI] 和 【MathpowG 2)】 


sphere volume = 上 => 4 / 3 * Math.PI * Math.pow(r, 3) ; 
此 表达 式 内 含 如 下 子 表达 式 : 

左 侧 表达 式 :【sphere volume =】 和 【Math.】 

箭头 函数 表达 式 :【r => 413* Math.PI * Math.pow(r, 3)】 
算术 表达 式 :【4 /3 * Math.PI * Math.pow(r, 3)】 

主要 表达 式 :【Math.PI】〗 和 【Math.pow(r, 3)】 


cylinder volume = (r, h) => circle area(lr) * h; 
此 表达 式 内 含 如 下 子 表 达 式 : 

左 侧 表达 式 :【cylinder_volume =】 

箭头 函数 表达 式 :【(r, hb) => circle area(r) *h】 
算术 表达 式 : 【circle area(r)* h】 

主要 表达 式 : 【circle area(D】 


cylinder surface area = (r, h) => 2 * circle areal(r) + circumference(r) * h; 
此 表达 式 内 含 如 下 子 表达 式 : 

左 侧 表达 式 :【cylinder surface area=】 

箭头 函数 表达 式 :【( hb)=> 2 * circle_area(r) + circumference(r)* h】 

算术 表达 式 :【2 * circle area(r) + circumference(r) * h】 

主要 表达 式 :【circle area(r)】〗 和 【circumference(r)】 


rounded circle area = circle area(10).toFixed(3) ; 

此 表达 式 内 含 如 下 子 表 达 式 : 

@ 左 侧 表达 式 :【rounded circle area=】 和 【circle_ area(10).】 

@ 主要 表达 式 :【circle area(10).toFixed(3)】、 【circle area(10)】 和 【toFixed(3)】 


rounded cylinder volume = cylinder volume (10, 20).toFixed(3) ; 

此 表达 式 内 含 如 下 子 表达 式 : 

@ ” 左 侧 表达 式 :【rounded cylinder volume =】 和 【cylinder_volume(10, 20).】 

@ 主要 表达 式 :【cylinder_volume(10, 20).toFixed(G3)】【cylinder volume(10, 20)】 和 【toFixed(3)】 


rounded cylinder_ surface area = cylinder surface area(10, 20).toFixed(3) ; 


此 表达 式 内 含 如 下 子 表达 式 : 
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ee ” 左 侧 表 达 式 :【rounded_ cylinder surface area=】 和 【cylinder _ surface area(10, 20).】 

@ 主要 表达 式 :【cylinder surface area(10, 20).toFixed(3)】【cylinder_surface_area(10，20)〗】 和 
【toFixed(3)】 

console.log(rounded circle area) ; 


console.1og (rounded cylinder_ volume) ; 
console.log (rounded cylinder surface area) ; 


如 上 3 个 语句 排除 分 号 【;】 的 其 余部 分 ， 皆 为 主要 表达 式 。 


2.1.4 函数 的 返回 值 


在 多 种 编程 语言 中 , 关键 字 retum 开头 的 语句 ， 除 了 会 终止 当前 函数 内 源 代 码 的 执行 ， 并 返 加 
调用 函数 的 子 表达 式 之 外 ， 亦 会 使 得 前 述 子 表达 式 ， 被 取代 成 为 返回 值 (retum value) ， 成 为 原始 
表达 式 的 操作 数 。 关 于 返回 值 的 理解 ， 可 参考 如 下 示例 。 


【2-1-4-function-return-values.js】 


// cv stands for "cubic volume". 

function cv01(1，w，h) 

{ 
let cubic volume = 1 *w*h; 
console.log(‘cubic volume of (${1}, ${w}, ${h}) = ${cubic volume} ) ; 
// return ; 

function cv02 (1，w， h) 

{ 


let cubic volume = 1 *w*h; 


return cubic volume ; 


let result01 = cv01(3, 5, 10) ; 


let result02 


cv02(3, 5, 10) ; 
let result03 = cv02(1, 3, 5) + cv02(2, 4, 6) ; 


console.log(“result01 ${result01}*) ; 
console.1log(`result02 S${fresult02} ) ; 
console.1log(`result03 = ${result03} ) ; 


【相关 说 明 】 


// cv stands for "cubic volume" . 
function cv01 (1，w， hb) 
{ 
let cubic volume = II *w*h; 
console.1log(`cubic volume of (${1}, ${w}, ${h}) = $fcubic_volume}j ) ; 
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// return ; 
} 


@ 在 上 述 函数 内 的 末尾 处 ， 并 未 放置 return 语句 ， 或 是 return 语句 仅仅 衔接 分 号 【;】〗。 所 以 , 此 
段 源 代码 定义 了 未 带 返 回 值 的 函数 cv010)。 


@ 函数 cv010 可 在 网 页 浏览 器 的 调试 工具 【Console】 面 板 里 ， 显 示 出 长 、 宽 、 高 可 能 不 同 的 立 


function cv02(1, w, h) 

{ 
let cubic volume = 1 *w*h; 
return cubic volume ; 

} 


@ 此 源 代 码 片段 定义 了 具有 返回 值 的 函数 cv020， 因 为 在 上 述 函数 内 的 末尾 处 ， 放 置 了 语句 
return cubic_ volume ;】, 

日 ”函数 cv020 亦 可 计算 出 长 、 宽 、 高 可 能 不 同 的 立方 体积 。 

let result01 = cv01(3, 5, 10) ; 


@ 此 语句 调用 了 函数 cv01(3, 5, 10)， 显 示 出 长 、 宽 、 高 各 为 3、5、10 的 立方 体积 。 
@ ”因为 函数 cv01() 并 无 返回 值 ， 所 以 变量 result01 会 被 赋予 原始 常量 undefined。 


let result02 = cv02(3，5，10) ; 


此 语句 调用 了 函数 cv02(3, 5, 10)， 并 将 长 、 宽 、 高 各 为 3、5、10 的 立方 体积 结果 值 ， 返 回 到 


此 语句 ， 成 为 新 的 操作 数 150， 使 得 此 语句 等 价 于 【let result02 = 150 ;】， 进 而 让 变量 result02 的 
数值 变 成 150。 


let result03 = cv02(1，3，5) + cv02(2, 4, 6); 


此 语句 调用 了 函数 cv02(1, 3, 5) 和 cv02(2, 4, 6)， 并 将 长 、 宽 、 高 各 为 1、3、5 与 2、4、6 的 个 


别 立 方 体积 结果 值 , 返回 到 此 语句 , 成 为 新 的 操作 数 15 与 48, 使 得 此 语句 等 价 于 【let result02 = 15 
+48 ;】， 进 而 让 变量 result02 的 数值 变 成 63。 


式 ， 


console.log(`result0l1 = ${result01} ) ; 
此 语句 显示 出 变量 result01 的 数据 为 undefined。 


console.log(`result02 = ${result02) ) ; 
console.log(`result03 = ${result03} ) ; 


这 两 个 语句 分 别 显 示 出 变量 result02 的 数值 150， 以 及 变量 result03 的 数值 63 。 


2.2 运算 符 


各 种 计算 机 编程 语言 均 支 持 一 系列 的 运算 符 ， 并 和 参与 其 中 的 操作 数 ， 构 成 特定 形态 的 表达 
以 满足 计算 机 各 种 复杂 的 演算 、 分 析 与 归纳 。 
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2.2.1 算术 运算 符 (ES7) 


JavaScript 语言 的 算术 运算 符 如 表 2-1 所 示 。 

表 2-1 JavaScript 的 运算 符 
运算 符 分 类 运算 符 
加 法 运算 符 〈addition operator) 或 一 元 正 号 运算 符 (unary plus operator) + 
减法 运算 符 (subtraction operator) 或 一 元 负 号 运算 符 〈unary negation operator) - 
乘法 运算 符 (multiplication operator) 
除法 运算 符 (division operator) 
求 余 运算 符 (remainder operator) 
求 寡 运算 符 〈exponentiation operator) 
递增 运算 符 〈increment operator) 
递减 运算 符 〈decrement operator) A 


下 面 通过 示例 介绍 各 种 算术 运算 符 的 运用 。 
【2-2-1-arithmetic-operators.js】 


let num01 = 125, num02 = 10, num03 = 5 : 
let result 一 0 


result = num01 % num02 ; 
console.log(result) ; 


result = num01 / num02 ; 
console.log(result) ; 


result = num01 * num02 ; 
console.log (result) ; 


result = num01 + num02 - num03 ; 
console.1log (result) ; 


result = ++num01 ; 
console.log(result, num01) ; 


result = num01++ ;} 
console.1log (result, num01) ; 


++num01 ; 
num01++ 大 


console.log(num01) ; 


Wns 3 
console.log (num01) ; 


num01l = numOl + 1 } 
console.log (num01) ; 


result = --num02 ; 
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Console.1log (result，num02) ; 


result = num02-- ; 
console.log(result, num02) ; 


--num02 ; 
num02-— ; 
console.1log (num02) ; 


num02 -= 1， 
num02 = num02 - 1， 
console.log (num02) ; 


result = num03 ** 3 ** 23 
console.log(result) ; 


result = num03 ** (3 ** 2) } 
console.log(result) ; 


result = (num03 ** 3) ** 23 
console.log(result) ; 


【相关 说 明 】 


let num01 = 125, num02 = 10, num03 = 5 : 
let result = 0 


这 两 个 语句 声明 了 具有 初始 数据 的 变量 num01、num02、num03 与 result。 

result = num01 % num02 ; 

语句 使 得 变量 result， 被 赋予 了 【变量 num01 的 数值 除 以 变量 num02 的 数值 】 的 余数 。 
result = num01 / num02 ; 
语句 使 得 变量 result， 被 赋予 了 【变量 num01 的 数值 除 以 变量 num02 的 数值 】 的 结果 值 。 


result = num01 * num02 ; 


语句 使 得 变量 result， 被 赋予 了 【变量 num01 的 数值 乘 以 变量 num02 的 数值 】 的 结果 值 。 
result = num0l + num02 - num03 ; 
此 语句 使 得 变量 result， 被 赋予 了 【变量 num01 的 数值 加 上 变量 num02 的 数值 ， 再 减 去 变量 
num03 的 数值 】 的 结果 值 。 
result = ++num01 ; 
此 语句 被 执行 之 前 ， 变 量 num01 的 数值 为 125。 

因为 运算 符 ++ 出 现在 变量 num01 的 左 侧 ， 也 就 意味 着 num01 的 数值 要 先 递增 为 126， 再 执 
行 【result=num01】。 

所 以 ，result 的 数值 最 终 为 126。 


result = num01++ 了 


此 语句 被 执行 之 前 ， 变 量 num01 的 数值 已 经 变 成 126。 


Em 


后 
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因为 运算 符 ++ 出 现在 变量 num01 的 右 侧 , 也 就 意味 着 要 先 执行 [result= num01】, 之 后 num01 
的 数值 才 递增 为 127。 
所 以 ，result 的 数值 最 终 仍然 为 126。 


++num01 ; 


num01++ 了 

这 两 个 语句 被 执行 之 前 ,变量 num01 的 数值 已 经 变 成 127。 因为 表达 式 ++num01 与 num01++ 
均 单 独 出 现在 语句 中 ， 所 以 可 简单 视 为 变量 num01 的 数值 ， 被 进行 了 2 次 递增 ， 变 成 129。 

num0l1 += 1 7 
此 语句 被 执行 之 前 , 变量 num01 的 数值 已 经 变 成 129。 此 语句 等 同 于 递增 变量 num01 的 数值 ， 
使 得 num01 的 数值 成 为 130。 


num01 = num01 + 1; 


此 语句 被 执行 之 前 ， 变 量 num01 的 数值 已 经 变 成 130。 此 语句 亦 等 同 于 递增 变量 num01 的 数 
值 ， 成 为 131。 
result = --num02 ; 

此 语句 被 执行 之 前 ， 变 量 num02 的 数值 为 10。 因 为 运算 符 -- 出 现在 变量 num02 的 左 侧 ， 也 
就 意味 着 num02 的 数值 要 先 递 减 为 9， 再 执行 【result = num02】。 所 以 ，result 的 数值 最 终 为 9。 


result = num02-— ; 


此 语句 被 执行 之 前 ， 变 量 num02 的 数值 已 经 变 成 9。 因 为 运算 符 -- 出 现在 变量 num02 的 右 
侧 ， 也 就 意味 着 要 先 执行 【result = num02】， 之 后 num02 的 数值 才 递 减 为 8。 所 以 ，result 的 数值 
最 终 仍然 为 9。 

--num02 ; 

num02-- ; 


这 两 个 语句 被 执行 之 前 ， 变 量 num02 的 数值 已 经 变 成 8。 因为 运算 符 --num02 与 num02-- 均 
单独 出 现在 语句 中 ， 所 以 可 简单 视 为 变量 num01 的 数值 ， 被 进行 了 两 次 递减 ， 变 成 6。 

num02 -= 1 7 

此 语句 被 执行 之 前 ， 变 量 num02 的 数值 已 经 变 成 6。 此 语句 等 同 于 递减 变量 num02 的 数值 ， 
成 为 5。 

num02 = num02 - 1， 

此 语句 被 执行 之 前 , 变量 num02 的 数值 已 经 变 成 5。 此 语句 亦 等 同 于 递减 变量 num02 的 数值 ， 
成 为 4。 

TE 二 二 3- 二 省 交 

在 此 ， 变 量 num03 的 数值 是 5。 因 为 求 寡 运 算 符 ** 具有 右 结合 的 特征 ， 所 以 【3 ** 2】 要 先 
被 评估 成 为 3， 也 就 是 9， 然 后 再 评估 【num03 ** 9】， 结 果 值 为 5， 也 就 是 1953125。 


result = num03 ** (3 ** 2) ? 
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在 此 ， 借 助 小 括号 运算 符 () 的 辅助 ， 可 明确 得 知 【(3 ** 2)】 会 优先 被 评估 成 为 3*， 也 就 是 9， 
然后 评估 【num03 ** 9】 的 结果 值 为 53， 也 就 是 1953125。 

result = (nuUn03 sy 3) ** 2 3 

在 此 ， 使 用 小 括号 运算 符 () 的 辅助 ， 可 明确 得 知 【(num03 ** 3)】 会 优先 被 评估 成 为 3， 也 就 
是 125， 然 后 再 评估 【125** 2】 的 结果 值 为 1253?， 也 就 是 15625。 


2.2.2 ”赋值 运算 符 


JavaScript 编程 语言 的 赋值 运算 符 (assignment operator) 存在 基本 形式 的 等 号 【=】， 以 及 如 
表 2-2 所 示 的 复合 形式 。 


表 2-2 ”JavaScript 的 赋值 运算 符 


关于 赋值 运算 符 的 运用 ， 可 参考 如 下 示例 。 
【2-2-2-assignment-operators.js】 


let a= 18, b=5,c=2;，; 
let result = 0 ? 


result 一 a+b+cx 
console.log(result) ; 


A 
at=b; 
console.log(a) ; 


KI a 
a-=b; 
console.log(a) ; 


【相关 说 明 】 


这 两 个 语句 声明 了 具有 初始 数据 的 变量 a、b、c 与 result。 
ES 一 
此 语句 里 的 赋值 运算 符 【=】， 使 得 变量 result 的 数值 ， 成 为 变量 a、b、c 各 数值 的 总 和 。 


此 语句 里 的 赋值 运算 符 【+=】， 使 得 变量 a 的 数值 ， 成 为 【变量 a 本 身 的 数值 加 上 变量 b 的 
数值 】 的 结果 值 。 
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a=b; 
语句 里 的 赋值 运算 符 【-=】， 使 得 变量 a 的 数值 ， 成 为 【变量 a 本 身 的 数值 减 去 变量 b 的 数 
值 】 的 结果 值 。 


a sb: 
t 语 句 里 的 赋值 运算 符 【*=】， 使 得 变量 a 的 数值 ， 成 为 【变量 a 本 身 的 数值 乘 以 变量 b 的 
数值 】 的 结果 值 。 


//a=a/b; 
a/=b; 


此 语句 里 的 赋值 运算 符 【人 庆 】， 使 得 变量 a 的 数值 ， 成 为 【变量 a 本 身 的 数值 除 以 变量 b 的 数 
值 】 的 结果 值 。 


//a=a%b,; 
a%s=b; 


此 语句 里 的 赋值 运算 符 【%=】， 使 得 变量 a 的 数值 ， 成 为 【变量 a 本 身 的 数值 除 以 变量 b 的 
数值 】 的 余数 。 


A 
Db wxm cj 


此 语句 里 的 赋值 运算 符 【〖s**=】， 使 得 变量 的 数值 ， 成 为 【变量 b 本 身 数值 的 。 军 次 】 (be 
的 结果 值 。 


l/l/b=b<<ce;? 
b << 王 CC 


此 语句 里 的 赋值 运算 符 【<<=】， 使 得 变量 b 的 二 进 制 数值 ， 向 左 偏 移 变量 所 代表 的 比特 位 
(bit) 个 数 。 


/l/b=b>>c; 
b >>= ci 


此 语句 里 的 赋值 运算 符 【>>=】， 使 得 变量 b 的 二 进 制 数值 ， 在 保留 正 负 号 的 前 提 下 ， 向 右 偏 
移 变量 所 代表 的 比特 位 (bit) 个 数 。 所 谓 的 保留 正 负 号 就 是 : 
”车 该 二 进 制 数 值 为 负 值 ， 则 其 最 左 侧 的 符号 位 (sign bit) 是 1， 并 在 向 右 偏 移 的 同时 ， 保 持 
其 符号 位 为 1。 
日 若 该 二 进 制 数值 为 正 值 , 则 其 最 左 侧 的 符号 位 是 0, 并 在 向 右 偏 移 的 同时 , 保持 其 符号 位 为 0。 


PD 
b >>>= cc， 


此 语句 里 的 赋值 运算 符 【>>>=】， 使 得 变量 b 的 数值 ， 成 为 【变量 b 的 二 进 制 数值 ， 向 右 偏 
移 变 量 c 所 代表 的 比特 位 (bit) 个 数 ， 并 在 其 左 侧 补 上 相同 个 数 的 二 进 制 0】 之 后 的 结果 值 。 

在 其 左 侧 补 上 相同 个 数 的 二 进 制 0， 也 就 意味 着 ， 一 开始 无 论 其 最 左 侧 的 符号 位 是 0〈 正 值 ) 
或 是 1〈 负 值 )， 后 续 皆 在 向 右 偏 移 的 同时 ， 保 持 符号 位 成 为 0。 


WD 
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be=c; 


此 语句 里 的 赋值 运算 符 【&=】， 使 得 变量 b 的 数值 ， 成 为 【变量 b 本 身 的 二 进 制 数 值 与 变量 
c 的 二 进 制 数值 ， 进 行 按 位 与 (bitwise and) 运算 】 之 后 的 结果 值 。 


此 语句 里 的 赋值 运算 符 【^ 二 】， 使 得 变量 b 的 数值 ， 成 为 【变量 b 的 二 进 制 数 值 与 变量 c 的 
二 进 制 数值 ， 进 行 按 位 异 或 (bitwise exclusive or) 运算 】 之 后 的 结果 值 。 


此 语句 里 的 赋值 运算 符 【^=】， 使 得 变量 b 的 数值 ， 成 为 【变量 b 的 二 进 制 数值 与 变量 e 的 
二 进 制 数 值 。 进 行 按 位 或 (bitwise or) 运算 】 之 后 的 结果 值 。 


2.2.3 ”比较 运算 符 


在 各 编程 语言 中 ， 比 较 运 算 符 (comparison operator) 是 用 来 决定 其 两 侧 操 作 数 相等 或 不 相等 
的 关系 。JavaScript 编程 语言 的 比较 运算 符 如 表 2-3 所 示 。 


表 2-3 JavaScript 语言 的 比较 运算 符 


判断 后 的 返回 值 


判断 变量 a 与 b 的 数值 ， 是 否 相等 
判断 变量 a 与 b 的 数值 ， 是 否 相等 ， 以 及 其 数据 类 型 是 
否 也 相同 

判断 变量 a 与 b 的 数值 ， 是 否 并 不 相等 

判断 变量 a 与 b 的 数值 ， 是 否 并 不 相等 ， 或 者 其 数据 类 | “为 真 ， 返 回 true 
型 是 否 也 不 同 * 为 假 ， 返 回 false 
判断 变量 a 的 数值 ， 是 否 大 于 变量 b 的 数值 

断 变量 a 的 数值 ， 于 或 者 等 于 变量 b 的 数值 
断 变量 a 的 数值 ， 是 否 小 于 变量 b 的 数值 

断 变量 a 的 数值 ， 是 否 小 于 或 者 等 于 变量 b 的 数值 


关于 比较 运算 符 的 综合 运用 ， 可 参考 如 下 示例 。 


【2-2-3-comparison-operators.js】 


let v01 = 100 ，v02 = 250, v03 = 500 ; 

let s01 = '100', s02 = '250', s03 = '500' ; 
console.log(v01 == s01) ; 

console.log(v01 === s01) ; 


console.log(v02 > s01) ; 
console.log(v02 < s03) ; 


console.log(v03 >= s03) ; 
console.log(v03 <= s03) ; 
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【相关 说 明 】 


let v01 = 100 , v02 = 250, v03 = 500 ; 
此 语句 声明 了 初始 数值 为 整数 常量 的 变量 v01、v02 和 v03。 


let s01 = '100', s02 = '250', s03 = '500°' ; 


此 语句 声明 了 初始 数据 为 字符 
console.log(v01 == s01) ; 


判断 变量 v01 与 s01 的 数据 是 否 相同 ， 并 显示 判断 为 真 的 返回 值 tue， 于 浏览 器 的 调试 工具 


【Console】 面 板 中 。 


console.1log(v01 === s01) ; 


console.log(v02 > s01) ; 


console.log(v02 <s 
判断 变量 v02 的 数值 是 否 
试 工具 【Console】 面 板 中 。 


console.log(v03 >= s03) ; 


判断 变量 v03 的 数值 是 否 大 于 或 者 等 于 变量 s03 的 数据 ， 关 
览 器 调试 工具 的 【Conso 

console.log(v03 <= 
断 变量 v03 的 数值 是 否 小 于 或 者 等 于 变量 s03 的 数据 ， 并 显示 判 
e】 面 板 中 。 


六 


览 器 的 调试 工具 【Consol 


03) ; 


2.2.4 ”逻辑 运算 符 
在 各 种 编程 语言 中 ， 逻 辑 运算 符 (logical operator) 主要 用 来 串联 带 有 比较 含义 的 表达 式 。 

JavaScript 编程 语言 的 逻辑 运算 符 如 表 2-4 所 示 。 

表 2-4 JavaScript 语言 的 逻辑 运算 符 


判断 变量 v01 与 s01 的 数据 是 否 相 同 , 以 及 其 数据 类 型 是 否 也 机 
false， 于 浏览 器 的 调试 工具 【Console】 面 板 中 。 


判断 变量 v02 的 数值 是 否 大 于 变量 s01 的 数据 ， 并 显示 判断 为 真 的 
试 工具 【Console】 面 板 中 。 


小 于 变量 s03 的 数据 ， 并 显示 判断 为 真 


e】 面 板 中 。 


s03) ; 


字面 量 的 变量 s01、s02 与 $03。 


显示 判断 为 真 的 返回 


目 同 ， 并 显示 判断 为 假 的 返 


返回 值 tue， 于 浏览 器 


断 为 真 的 返回 值 true， 于 


返回 值 rue， 于 浏览 器 


值 true 于 


逻辑 运算 符 | 用 法 含义 判断 后 的 返回 值 
a8 el 8& e2 | 判断 表达 式 el 与 e2， 是 否 皆 为 丰 
1 6 | 62 | 新 表 这 式 61 或 9， 是 下 其 中 之 一 为 真 Ee 
! 1 el 判断 表达 式 el， 是否 并 非 为 丰 i ie 
i 1 is | 判断 el 所 代表 的 属性 名 称 , 是 否 存在 于 e2 所 代 

表 的 对 象 实例 中 


调 


调 
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逻辑 运 


算 符 的 综合 运用 ， 可 参考 如 下 示例 。 


【2-2-4-logical-operators.js】 


let v01 = 1 


0, v02 = 50, v03 = 60 5 


let values = [10, 20, 30, 40, 50] ; 


let person = {name: 'Gary', gender: 'male'，age: '25'} ; 
// result = true && true ; 

result = V01 < vO02 && v02 < v03; 

console.log(result) ; 

// result = false || true; 

result = V01 > v02 || v03 > v02 : 

console.log(result) ; 

// result = ! false ; 

result = ! (v01 > v02) ; 

console.log(result) ; 


result = 2 
console .1og 


result = '1 
console.log 


result = 'r 
console.log 


result = 'g 
console.log 


【相关 说 明 
let v01 = 1 
此 语句 声明 
let values 
此 语句 声明 
let person 
此 语句 声明 


// result = 
result = v0 


in values ; 
(result) ; 


ength' in values ; 
(result) ; 


ound' in Math ; 
(result) 7 


ender' in Person ; 
(result) ; 


】 
0，v02 = 50, v03 = 60 : 

了 初始 数值 为 整数 常量 的 变量 v01、v02 与 v03。 
= [10, 20, 30, 40, 50] ; 

了 初始 数据 为 数组 实例 的 变量 values。 

= {name: 'Gary', gender: "male'，age: '25'} ; 
了 初始 数据 为 对 象 实例 的 变量 person。 


true && true ; 
1 < v02 && v02 < v03 ; 


【v01 < v02 】 为 真 ， 所 以 返回 true; 【v02 < v03 】 为 真 , 所 以 返回 true。 因 此 , 【v01 < v02 && 


v02 < v03】 亦 为 


// result = 
result = v0 


真 而 返回 tue， 使 得 变量 result 的 数据 成 为 布尔 值 true。 


false || true; 
1> v02 I| v03 > v02 : 


【v01 > v027 为 假 ， 所 以 返回 false; 【v03 > v02] 为 真 ， 所 以 返回 


v03 > v02】 亦 为 


真 而 返回 true， 使 得 变量 result 的 数据 成 为 布尔 值 true。 


true。 因 此 ， 


【vol > v021| 
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// result = ! false ; 
result = ! (v01 > v02) ; 


【v01 > v02】 为 假 ， 所 以 返回 false。 因 此 ，【! (v01 > v02)】 为 真 而 返回 true， 使 得 变量 result 
的 数据 成 为 布尔 值 true。 

result = 2 in values ; 

变量 values 的 数据 是 数组 实例 [10, 20, 30, 40, 50]， 所 以 values[0] 可 访问 到 数组 实例 的 元 素 值 
10; values[4] 可 访问 到 数组 实例 的 元 素 值 50。 

在 数组 实例 名 称 values 右 侧 的 中 括号 [] 里 面 ， 例 如 values[3]， 存 在 作为 索引 值 (index value) 
的 整数 值 3， 以 访问 其 索引 值 3 所 代表 的 特定 元 素 40。 

在 此 ， 因 为 索引 值 2 (第 3 个 ) 对 应 到 values[2] 所 代表 的 第 3 个 元 素 值 30， 所 以 【2 in values】 
为 真 而 返回 true， 使 得 变量 result 的 数据 成 为 布尔 值 true。 

result = 'length' in values ; 


变量 values 的 数据 是 数组 实例 ， 因 此 变量 values 具有 属性 length， 可 用 来 获取 values.length 所 
代表 元 素 个 数 的 整数 值 5。 所 以 ，【'length' in values 】 为 真 而 返回 true， 使 得 变量 result 的 数据 成 为 
布尔 值 true。 

result = 'round' in Math ; 

内 置 的 对 象 Math 具有 函数 round(), 所 以 [round' in Math ] 为 真 而 返回 true, 进而 使 得 变量 result 
的 数据 成 为 布尔 值 true。 


result = 'gender' in person ; 


变量 person 的 数据 是 对 象 实例 fname: 'Gary', gender: 'male', age: '254， 所 以 属性 gender 可 用 来 
访问 到 person.gender 所 代表 属性 的 数据 'male'"。 所 以 ，【'gender' in person】 为 真 而 返回 tue， 使 得 
变量 result 的 数据 成 为 布尔 值 rue。 


2.2.5 ”条件 运 算 符 


从 C 语言 开始 ， 许 多 后 继 的 编程 语言 ， 均 支持 条 件 运算 符 〈conditional operator) /三 元 运算 符 
(ternary operator) ， 并 用 来 简化 特定 形式 的 证 语句 。 关 于 条 件 运算 符 的 运用 ， 可 参考 如 下 示例 。 


【2-2-5-conditional-operator.js】 


let score, passed ; 


Score = 58 ; 


passed = score >= 60 ? 'yes' : 'no' : 
console.log (passed) ; 


Score = 77 ;3 


passed = score >= 60 ? 'yes' : 'no'}; 
console.log(passed) ; 
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Score = 


60 


if (score >= 60) passed = 'yes' ; 
else passed = 'no' ; 


console 


.log(passed) ; 


【相关 说 明 】 


let score, passed ; 


score = 


passed = score >= 60 ? 'yes' : 


58 7 


语句 声明 了 变量 score 与 passed。 


此 语句 使 得 变量 score， 被 赋予 整数 值 58。 


'no'; 


对 于 表达 式 【score >= 60 ? 'yes' : mo'】 而 言 ， 若 【score >= 60】 为 真 ， 则 返回 字符 串 'yes'; 否 


则 返回 字符 串 no'。 在 此 ， 其 为 假 ， 所 以 返回 字符 串 mo'， 进 而 使 得 变量 passed 的 数据 ， 成 为 字符 串 


mo'。 


Score = 


passed = Score >= 60 ? 'yes' : 


yh 


此 语句 使 得 变量 score， 被 赋予 整数 值 77。 


"no' 7 


在 此 ， 表 达 式 【score >= 60 ? 'yes' : no'】 返 回 字 符 串 'yes'， 进 而 使 得 变量 passed 的 数据 ， 成 为 


字符 串 'yes'。 


Score = 


60 


此 语句 使 得 变量 score， 被 赋予 整数 值 60。 


if (score >= 60) passed = 'yes' 


else passed = "no' } 


对 于 此 条 件 语句 而 言 ， 若 【score >= 60】 为 真 ， 则 变量 passed 会 被 赋予 字符 串 'yes'， 否 则 会 被 
赋予 字符 串 mo'。 在 此 ， 其 为 真 ， 所 以 返回 字符 串 'yes'， 进 而 使 得 变量 passed， 被 赋予 字符 串 'yes'。 


2.2.6 ”类 型 运算 符 


类 型 运算 符 (typeof operator) 用 来 返回 特定 操作 数 (operand) 的 数据 类 型 (data type) 。 关 


let num01 = 33, num02 = 1.414 ; 


console 
console 
console 
console 


.log (typeof num01) ; 


.log (typeof 33) ; 


.log (typeof num02) ; 
.log (typeof 1.414) ; 


于 类 型 运算 符 的 综合 运用 ， 可 参考 如 下 示例 。 
【2-2-6-typeof-operator.js】 
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【相关 说 明 】 


此 语句 声明 了 具有 初始 数值 的 变量 num01 与 num02。 
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表达 式 【typeof num01) 会 得 出 变量 num01 的 数据 类 型 名 称 ， 在 此 为 字符 串 mumber'。 
console.log (typeof 33) ; 

表达 式 【typeof 33】 会 得 出 常量 33 的 数据 类 型 名 称 ， 在 此 为 字符 串 "number'。 

console.log (typeof num02) ; 

表达 式 【typeof num02】 会 得 出 变量 num02 的 数据 类 型 名 称 ， 在 此 为 字符 串 mumber 。 
console.log(typeof 1.414) ， 

表达 式 【typeof 1.414】 会 得 出 常量 1.414 的 数据 类 型 名 称 ， 在 此 为 字符 串 mumber'。 
console.log (typeof Math.PI) ; 

表达 式 【typeof Math.PI】 会 得 出 内 置 对 象 Math 的 常量 属性 PI 的 数据 类 型 名 称 ， 在 此 为 字符 


串 "number 。 


console.1log (typeof NaN) ; 

表达 式 【typeof NaN】 会 得 出 原始 常量 NaN 的 数据 类 型 名 称 ， 在 此 为 字符 串 mumber'。 
console.log(typeof Infinity) ; 

表达 式 【typeof Infinity】 会 得 出 内 置 常量 Infinity 的 数据 类 型 名 称 ， 在 此 为 字符 串 mumber。 
console.1log (typeof '') ; 

表达 式 【typeof"】 会 得 出 空 字符 串 "的 数据 类 型 名 称 ， 在 此 为 字符 串 'string'。 
console.log(typeof "") ; 

表达 式 【typeof "】 会 得 出 空 字符 串 "" 的 数据 类 型 名 称 ， 在 此 为 字符 串 string'。 

console.log (typeof "Hello, Earth!") ; 

表达 式 【typeof "Hello,，Earth!"】 会 得 出 字符 串 "Hello，Earth!" 的 数据 类 型 名 称 ， 在 此 为 字符 串 


'string'。 


console.log (typeof true) ; 

表达 式 【typeof true】 会 得 出 布尔 值 true 的 数据 类 型 名 称 ， 在 此 为 字符 串 'boolean'。 

console.1og (typeof false) ; 

表达 式 【typeof false】 会 得 出 布尔 值 false 的 数据 类 型 名 称 ， 在 此 为 字符 串 'boolean'。 

console.log(typeof (num01 > num02)) ; 

表达 式 【typeof (num01 > num02)】 会 得 出 子 表达 式 【num01 > num02】 返 回 值 的 数据 类 型 名 称 ， 
在 此 为 字符 串 'boolean'。 

console.1og (typeof undefined) ; 

值得 关注 的 是 ， 原 始 常量 undefined 的 数据 类 型 亦 是 undefined。 表 达 式 【typeof undefined]】 会 
得 出 原始 常量 undefined 的 数据 类 型 名 称 ， 在 此 为 字符 串 undefined'。 


console.log(typeof num03) ; 
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在 此 ，num03 未 被 声明 为 变量 或 函数 名 称 ， 所 以 num03 处 于 未 定义 undefined) 的 状态 。 表 
达 式 【typeofnum03 】 会 得 出 未 被 声明 的 num03 的 数据 类 型 名 称 ， 在 此 为 字符 串 "undefined'。 

console.log (typeof function() {}) ; 

表达 式 【typeof function0 f}】 会 得 出 匿名 函数 的 数据 类 型 名 称 ， 在 此 为 字符 串 'function'。 

console.log (typeof Array.isArray) ; 

表达 式 【typeof Array.isArray】 会 得 出 内 置 对 象 Array 的 函数 isArray() 的 数据 类 型 名 称 ， 在 此 
为 字符 串 'function'。 

console.log (typeof Object()) ; 

因为 Object 对 象 的 构造 函数 Object()， 会 返回 Object 对 象 的 实例 ， 也 因此 表达 式 【typeof 
Object()】 会 得 出 Object 对 象 实例 的 数据 类 型 名 称 ， 在 此 为 字符 串 'object 。 

console.log (typeof new Object()) ; 

表达 式 【typeof new Object()】 也 会 得 出 Object 对 象 实例 的 数据 类 型 名 称 ， 在 此 亦 为 字符 串 
'object。 此 外 ，JavaScript 语言 尚未 界定 【ObjectO】 与 【new Object0】 的 明显 区 别 。 


console.1log(typeof {}) ; 

表达 式 【typeof {}】 会 得 出 空 对 象 实例 的 数据 类 型 名 称 ， 在 此 亦 为 字符 串 'opject 。 而 在 
JavaScript 编程 语言 中 ， 如 下 3 个 语句 是 等 价 的 : 

® obj=0; 

® obj=newObject(); 

® obj=Object(; 


console.log (typeof Array()) ; 

因为 Array 对 象 的 构造 函数 Array0, 会 返回 Array 对 象 的 实例 ; 也 因此 表达 式 【typeof Array()】 
会 得 出 Array 对 象 实例 的 数据 类 型 名 称 ， 在 此 竟然 也 为 字符 串 'object'。 

console.log (typeof new Array()) ; 

表达 式 【typeof new Array()] 亦 会 得 出 Array 对 象 实例 的 数据 类 型 名 称 , 在 此 亦 为 字符 串 'object'。 
此 外 ，JavaScript 编程 语言 尚未 界定 【Array0】 与 【new Array0】 的 明显 区 别 。 

console.log(typeof []) ; 

表达 式 【typeof []】 会 得 出 室 数 组 实例 [的 数据 类 型 名 称 , 在 此 为 字符 串 'object'。 而 在 JavaScript 
语言 中 ， 如 下 3 个 语句 是 等 价 的 : 


® ar=[]; 
® ar=newArray(); 
® arr 一 Array( ; 


在 JavaScript 语言 里 ， 将 数组 实例 〈array instance) 的 数据 类 型 视 为 object。 


console.log(typeof null) ; 
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【typeof null】 表 达 式 会 得 出 原始 常量 null 的 数据 类 型 名 称 ， 在 此 为 字符 串 'object'。 
console.log (typeof String('test')) ; 
凡 置 对 象 String 的 构造 函数 String(test)， 只 会 返回 字符 串 test 。 因 此 ， 表 达 式 【typeof 
String('test')】 等 同 于 获得 字符 串 'test 的 数据 类 型 名 称 ， 在 此 为 字符 串 'string'。 
console.10g (typeof new String('test')) ; 
置 对 象 String 的 构造 函数 String('test') 会 返回 字符 串 'test。 再 经 过 new 关键 字 的 处 理 ， 会 返 
可 内 含 字 符 串 est 的 String 对 象 实例 。 因 此 ， 表 达 式 【typeof new String(test)】 等 同 于 获得 String 
象 实例 的 数据 类 型 名 称 ， 在 此 为 字符 串 'object'。 
console.log (typeof Number(123)) ; 

内 置 对 象 Number 的 构造 函数 Number(123), 会 返回 整数 常量 123。 因此, 【typeof Number(123)】 
表达 式 等 同 于 获得 整数 常量 123 的 数据 类 型 名 称 ， 在 此 为 字符 串 mumber。 

console.log (typeof new Number(123)) ; 
内 置 对 象 Number 的 构造 函数 Number(123), 会 返回 整数 常量 123。 再 经 过 new 关键 字 的 处 理 ， 
会 返回 内 含 整数 常量 123 的 Number 对 象 实例 。 因 此 ， 表 达 式 【typeof new Number(123)】 等 同 于 获 
得 Number 对 象 实例 的 数据 类 型 名 称 ， 在 此 为 字符 串 'object 。 

console.1log(typeof Date()) ; 
内 置 Date 对 象 的 构造 函数 Date0， 会 返回 当前 日 期 与 时 间 的 字符 串 。 因 此 ， 表 达 式 【typeof 
Date()】 等 同 于 获得 当前 日 期 与 时 间 的 字符 串 的 数据 类 型 名 称 ， 在 此 为 字符 串 'string'。 

console.log (typeof new Date()) ; 
内 置 Date 对 象 的 构造 函数 Date()， 会 返回 当前 日 期 与 时 间 的 字符 串 。 再 经 过 new 关键 字 的 处 
理 ， 会 返回 内 含 当 前 日 期 与 时 间 的 Date 对 象 实例 。 因 此 ， 表 达 式 【typeof new Date()】 等 同 于 获得 
Date 对 象 实例 的 数据 类 型 名 称 ， 在 此 为 字符 串 'object'。 


汉 


2.2.7” 按 位 运算 符 


JavaScript 语言 的 按 位 运算 符 (bitwise operator) ， 在 被 运算 之 前 ， 其 两 侧 操 作 数 (operand) 
的 数据 ， 会 被 转换 成 为 32 个 比特 位 的 数据 。 关 于 按 位 运算 符 的 综合 运用 ， 可 参考 如 下 示例 。 
【2-2-7-bitwise-operators.js】 


let num01 = 56, num02 = 77 ; 
let num03 = 124, num04 = -3 ; 


console.log (num01.tostring(2)) ; 
console.log (num02.toString(2)) ; 
console.log (num03.toString(2)) ; 
console.10g('') 
console.log (num01 == 0b111000) ; 
0b00111000) ; 


console.log (num01 
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【相关 说 明 】 


这 两 个 语句 声明 了 初始 数据 为 整数 值 的 变量 num01、num02、num03 与 num04。 


这 3 个 语句 中 的 【.toString(2)】， 可 分 别 将 变量 num01、num02 与 num03 的 整数 值 ， 转 换 成 
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为 字符 串 类 型 的 二 进 制 数码 。 

console.log (num01 == 0b111000) ; 

【num01 一 0b111000】 可 用 来 判断 变量 num01 的 数值 ， 是 否 等 于 二 进 制 整数 【111000】。 在 
此 ， 其 返回 true。 加 上 【0b】 在 二 进 制 数码 的 左 侧 ， 可 使 得 此 代码 被 视 为 二 进 制 数值 。 

在 此 亦 可 得 知 ， 浏 览 器 中 的 JavaScript 引擎 ， 仍 然 将 最 左 比特 位 〈leftmostbit) 为 1 的 数值 ， 
视 为 正 值 (positive value) 。 因 此 ， 若 要 变更 成 为 负 值 Cnegative value) ， 则 修改 为 【- 0b111000】。 

console.1log(num01 == 0b00111000) ; 

【num01 一 0b00111000] 可 用 来 判断 变量 num01 的 数值 ， 是否 等 于 二 进 制 整数 【00111000】。 
在 此 ， 其 返回 true。 

在 此 可 得 知 ， 浏 览 器 中 的 JavaScript 引擎 将 【0b00111000】 与 【0b111000】， 视 为 相同 的 二 进 
制 数值 。 


console.1og (num02 


0b1001101) ，; 
0b01001101) ，; 

【num02 一 0b1001101】 可 用 来 判断 变量 num02 的 数值 ， 是 否 等 于 二 进 制 整 数 【1001101】。 
在 此 ， 其 返回 true。 
【num02 一 0b01001101】 可 用 来 判断 变量 num02 的 数值 ,是否 等 于 二 进 制 整数 【01001101】 。 
在 此 ， 其 返回 true。 

在 此 可 得 知 ，JavaScript 引擎 将 【0b1001101】 与 【0b01001101】， 视 为 相同 的 三 进 制 数值 。 

console.log (num03 == 0b1111100) ; 
console.log (num03 == 0b01111100) ; 

【num03 一 0b1111100) 可 用 来 判断 变量 num03 的 数值 ， 是否 等 于 二 进 制 整 数 【0b1111100】。 
在 此 ， 其 返回 true。 
【num03 一 0b01111100】 可 用 来 判断 变量 num03 的 数值 , 是 否 等 于 二 进 制 整数 [0b01111100】。 
在 此 ， 其 返回 true。 

由 此 可 得 知 ，JavaScript 引擎 将 【0b1111100】 与 【0b01111100】， 视 为 相同 的 三 进 制 数值 。 


console.1og (num02 


00111000 

&01001101 

00001000 

Sf 

result = num01 & num02 ; 


【num01 & num02】 可 得 到 【变量 num01 与 num02 的 二 进 制 数据 ， 进 行 按 位 和 bitwise and) 
运算 】 之 后 的 结果 值 。 


/* 
00111000 
101001101 
01111101 
of 
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【num01 |num02】 可 得 到 【变量 num01 与 num02 的 二 进 制 数据 ， 进 行 按 位 或 (bitwise or) 运 
算 】 之 后 的 结果 值 。 


【num01 ^ num02】 可 得 到 【变量 num01 与 num02 的 二 进 制 数 据 ， 进 行 按 位 异 或 bitwise 
exclusive or) 运算 】 之 后 的 结果 值 。 


【~ num03】 会 得 到 【变量 num03 的 二 进 制 数据 ， 进 行 2 的 补 码 (two's complement) 】 之 后 
的 结果 值 。 


【num03 << 1】 会 得 出 【变量 num03 的 2 进位 数据 ， 向 左 偏 移 1 个 比特 位 】 之 后 的 结果 值 。 


【num03 >> 1】 会 得 出 【变量 num03 的 2 进位 数据 ， 向 右 偏 移 1 个 比特 位 】 之 后 的 结果 值 。 
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S 
result = num04 >>> 1 7? 
【num04 >>> 1] 会 得 出 【变量 num04 的 2 进位 数据 ， 向 右 偏 移 1 个 比特 位 的 同时 ， 在 其 最 左 
侧 的 符号 位 (sign bit) ， 填 入 0】 之 后 的 结果 值 。 
此 语句 被 执行 之 前 ， 变 量 num04 的 数值 为 负 整 数 -3。 此 语句 被 执行 之 后 ， 变 量 num04 的 数值 
却 变 成 非常 大 的 正 整数 2147483646， 可 见 其 符号 位 被 填 入 了 0。 


console.log((2 ** 31 -1) -1); 


【(2** 31 - 1) - 1】 会 评估 出 (231 - 1) - 1， 也 就 是 正 整数 2147483646。 


@ 小 括号 / 圆 括 号 (parentheses, round brackets ) 运算 符 (): 除了 用 于 变更 特定 表达 式 的 运算 优 
先 级 之 外 ， 亦 被 用 于 让 、switch、for、while 等 语 负 和 函数 的 调用 。 

@ 中 括号 / 方 括号 (brackets, square brackets ) 运 算 符 []: 主要 用 于 数组 (array ) 或 字符 串 (string ) 
相关 的 定义 和 访问 。 

@ 大 括号 / 花 括 号 (braces, curly brackets ) 运算 符 f}:; 用 于 语句 的 分 组 (grouping )、 函 数 的 主 
体 构造 ， 以 及 对 象 (object ) 的 定义 。 

关于 插 号 运算 符 的 综合 运用 ， 可 参考 如 下 示例 。 

【2-2-8-brackets-operators.js】 

let a= 10, p=5,c=3; 


let result = 0 


result =a-b*ce;} 
console.log (result) ; 


result = (a- b)*ce;? 
console.log (result) ; 


SDE 和 
console.log(result) ; 


和 生 这 
console.log(result) ; 
console.10g('') ; 


/1 
let now = new Date() ; 


console.log (now) ; 
console.1log (now.toLocaleString()) ; 
console.1log('') ; 


> 
~ 
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【相关 说 明 】 


这 两 个 语句 声明 了 具有 初始 数值 的 变量 a、b、c 和 result。 
和 = 和 i 

表达 式 【a - b* c】 会 先 被 计算 出 【b* c】 的 结果 值 ， 再 计算 出 整个 表达 式 的 结果 值 。 
CC 一 


因为 小 括号 运算 符 的 缘故 ， 表 达 式 【(a - b) * c】 会 先 被 计算 出 【a - b】 的 结果 值 ， 再 计算 出 整 
个 表达 式 的 结果 值 。 


因为 求 曙 运算 符 ** 具 有 右 结合 的 特征 ， 所 以 表达 式 【a ** c ** 2】 会 先 被 计算 出 【c ** 2】 的 结 
果 值 ， 再 计算 整个 表达 式 的 结果 值 。 


因为 小 括号 运算 符 的 缘故 ， 表 达 式 【(a ** c) ** 2】 会 先 被 计算 出 【a ** c】 的 结果 值 ， 再 被 计 
算出 整个 表达 式 的 结果 值 。 


此 语句 使 得 变量 now， 具 有 初始 数据 为 【内 含 当前 日 期 与 时 间 】 的 Date 对 象 实例 。 
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借助 此 语句 ， 可 在 网 页 浏览 器 的 调试 工具 【Console】 面板 中 ， 显 示 出 标准 格式 的 日 期 与 时 间 。 
例如 : 【Fri Dec 29 2017 01:16:16 GMT+XX00 (XX 标准 时 间 )】。 

console.log (now.toLocaleString()) ; 

【now.toLocalString0】 可 将 日 期 与 时 间 ， 以 精简 的 本 地 格式 ， 显 示 出 来 。 例 如 : 【2017/12/29 
上 午 1:16:16】。 

let obj = new Object() ; 

因为 小 括号 运算 符 的 缘故 ， 使 得 Object 对 象 的 构造 函数 Object() 被 调用 。 此 语句 使 得 变量 obj 
的 初始 数据 ， 成 为 Object 对 象 的 空 实例 (empty instance) 。 


obj.name = 'Jasper' ; 
obj.gender = 'male' ; 
obj.age = 28 ; 


这 3 个 语句 分 别 设置 了 变量 obj 的 新 属性 name、gender、age 和 其 个 别 数据 'Jasper'、'male'、28。 


console.log(obj) ; 


此 语句 可 显示 出 变量 obj 的 数据 ， 也 就 是 对 象 实例 {name: "Jasper", gender: "male", age: 28}。 

function display (choice, message) 

因为 小 括号 运算 符 的 缘故 , 网 页 浏览 器 或 其 他 软件 中 的 JavaScript 引擎 , 可 认 出 关键 字 function 
开头 的 此 源 代码 片段 , 即 是 用 来 定义 【 带 有 参数 choice 和 message, 而 且 其 名 称 为 display】 的 函数 。 


{ 

if (choice == 1) alert(message) ; 

else if (choice == 2) confirm(message) ; 
} 


借助 大 括号 运算 符 {}，JavaScript 引擎 可 认 出 大 括号 { ... } 里 的 源 代码 ， 即 是 函数 display0 的 主 
体 结 构 。 

在 函数 display0 的 主体 结构 里 ， 仍 然 可 以 看 到 小 插 号 运算 符 ， 出 现在 让 语句 中 。 另 外 ， 亦 可 
看 到 小 括号 运算 符 ， 出 现在 内 置 函 数 alert() 与 confirm() 的 调用 语法 中 。 


display(l1, 'Hello, Earth!') ; 
display(2, 'Hello, are You human?') ; 


这 两 个 语句 ， 通 过 传 入 不 同 参数 值 ， 而 重复 调用 了 函数 display()。 

let fruits = ['apple', 'banana', 'cherry', "durian'] ; 

借助 中 括号 运算 符 ]， 在 此 语句 里 的 等 号 右 侧 ， 即 是 内 含 4 个 字符 串 元 素 的 数组 实例 。 
console.log(fruits[1]) ; 


此 语句 通过 数组 变量 的 名 称 fruits， 以 及 中 括号 运算 符 里 的 元 素 索引 值 1， 访 问 到 fruits[1] 所 代 
表 的 字符 串 元 素 'banana'。 
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2.2.9 扩展 运算 符 (ES6) 


简单 来 说 ， 由 3 个 英文 句点 【.…】 构 成 的 扩展 运算 符 (spread operator) ， 可 被 用 来 【外 除 】 
特定 数组 的 中 括号 或 者 特定 对 象 的 大 括号 。 关 于 扩展 运算 符 的 综合 运用 ， 可 参考 如 下 示例 。 


【2-2-9-spread-operator.js】 


var greetings = ['Hi', 'Howdy', 'Hey, man', 'G\'day mate'] ; 
Var extended greetings = ['Long time no see', 'Nice to see you', 'Hiya' , ... greetings] ; 


console.log (extended greetings) ; 
console.1og('') ; 


Var number texts = ['one', 'two', 'three'] 
Var number digits = '123' ; 


var numbers = [... number texts, ... number digits] 


console.log (numbers) ; 
console.1og('') ; 


/1/1 
let birthday = new Date(1999, 11, 25, 20, 30) ; 
let now = new Date() ; 


console.log (birthday.toLocaleString()) ; 
console.1og (now.toLocaleString()) ; 
console.1log('') ; 


/AL/ 

let arr0l = [1, 2, 3] ; 

let arr02 = [10, 20, 30] ; 

let arr03 = [... arr01l, ... arr02, 100, 200, 300] ; 


let obj01 = {name: 'orange', amount: 10} ; 
let obj02 = {name: 'durian', amount: 5, origin: 'Thai'} ; 
let obj03 = {... obj01, ... obj02} ; 


console.log(arr03) ; 
console.1log (obj03) ; 
console.10g('') ; 


【相关 说 明 】 

var greetings = ['Hi', 'Howdy', 'Hey, man', 'G\'day mate'] ; 

此 语句 声明 了 初始 数据 为 数组 实例 的 变量 greetings。 

var extended greetings = ['Long time no see', 'Nice to see you', 'Hiya' , ... greetings] ; 


此 语句 声明 了 初始 数据 为 另 一 数组 实例 的 变量 extended_greetings。 扩 展 运算 符 【...】 使 得 变量 
extended_greetings 的 数组 实例 ， 带 有 变量 greetings 的 数组 实例 中 的 所 有 元 素 。 
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Var number texts = ['one', 'two', 'three'] 


语句 亦 声 明了 初始 数据 为 另 一 数组 实例 的 变量 number_texts。 


var number digits = '123' ; 
语句 声明 了 初始 数据 为 字符 串 '123' 的 变量 number digits。 
var numbers = [... number texts, ... number digits] 


扩展 运算 符 【.…】 使 得 变量 numbers 的 初始 数据 , 成 为 合并 【变量 number texts 与 number_digits 
的 个 别 数 组 实例 的 新 数组 实例 , 进而 使 得 变量 numbers 的 数据 , 成 为 数组 实例 ["one", "two", "three"， 
"1", 2", 3 中。 


let birthday = new Date(1999，11，25，20，30) ; 


此 语句 声明 了 【初始 数据 为 内 含 日 期 与 时 间 1999/12/25 20:30:00 的 Date 对 象 实例 】 的 变量 
birthday。 


需 留意 的 是 ， 构 造 函 数 Date() 小 括号 中 的 第 2 个 参数 值 为 11， 其 实 是 代表 12 月 份 的 含义 。 换 
名 话说， 此 参数 值 若 为 0， 则 代表 1 月 份 。 


let now = new Date() ; 

此 语句 声明 了 【初始 数据 为 当前 日 期 与 时 间 的 Date 对 象 实例 】 的 变量 now。 
console.1og (birthday.toLocaleString()) ; 

此 语句 会 显示 出 【1999/12/25 下 午 8:30:00】 的 信息 。 

console .1og (now.toLocaleString()) ; 

此 语句 显示 出 当前 日 期 与 时 间 的 信息 。 


let arr0l = [1, 2, 3] ; 
let arr02 = [10, 20, 30] ; 


这 两 个 语句 声明 了 【初始 数据 为 不 同 数组 实例 】 的 变量 arr01 与 arr02。 
let arr03 = [... arr01l, ... arr02, 100, 200, 300] ; 
此 语句 声明 了 变量 arr03， 并 借助 扩展 运算 符 【.…】， 使 得 其 【初始 数据 为 合并 变量 arr01 与 


arr02 的 数组 实例 ， 再 衔接 子 数组 实例 [100, 200, 300]】 的 新 数组 实例 [1, 2, 3, 10, 20, 30, 100, 200， 
300]。 


let obj01 
let obj02 


{name: 'orange', amount: 10} ; 


{name: 'durian', amount: 5, origin: ‘'Thai'} ; 

这 两 个 语句 声明 了 【初始 数据 为 对 象 实例 】 的 变量 obj01 与 obj02。 

let obj03 = {... obj01, ... obj02} ; 

此 语句 声明 了 变量 obj03， 并 借助 扩展 运算 符 【.…】， 使 得 其 【初始 数据 为 合并 变量 obj01 与 
obj02 对 象 实例 】 的 新 对 象 实例 fname: "durian", amount: 5, origin: "Thai"} 。 

值得 注意 的 是 ,变量 obj01 与 obj02 均 存 在 属性 name 与 amount。 经 过 扩展 运算 之 后 ,变量 obj03 
的 属性 name 与 amount 却 只 有 一 个 ,而 且 其 属性 的 数据 , 均 个 别 与 变量 obj02 的 属性 name 和 amount 


第 2 章 表达 式 与 运算 符 | 51 


的 数据 ， 是 相同 的 。 


2.2.10 ”逗号 运算 符 


逗号 运算 符 (comma operator) 主要 用 来 并 联 多 个 赋值 表达 式 或 操作 数 。 关 于 逗号 运算 符 的 运 
可 参考 如 下 示例 。 


【2-2-10-comma-operator.js】 


let ae 1l, b=21, c= 31} 
let d, e, £3 


d=e=a+b,f=btce: 


console.log(d, e, £) ; 

【相关 说 明 】 

let a=1l,b=21l,c=31; 

此 语句 声明 了 初始 数据 均 为 整数 的 变量 a、b 与 c。 

Te 

此 语句 声明 了 未 设置 初始 数据 的 变量 d、e 与 f。 
d=e=atb,f=b+t+c; 

此 语句 主要 由 两 个 表达 式 【d=e=a+b] 与 【f=b+c] 构成 。 


@ 第 1 个 表达 式 先 被 计算 出 【a+b】 的 结果 值 ， 再 赋 给 变量 d 和 e。 
@ 第 2 个 表达 式 先 被 计算 出 【b+c) 的 结果 值 ， 再 赋 给 变量 了 


修改 此 语句 中 的 逗号 运算 符 【,】， 成 为 代表 语句 结束 的 分 号 【;】， 并 不 影响 其 结果 值 。 只 是 ， 


原本 的 单一 语句 ， 就 变 成 在 同一 行 的 两 个 语句 了 。 


console.log(d, e, f); 


通过 传 入 变量 4d、e 和 上 的 数值 ， 作 为 函数 console.log() 的 参数 值 ， 可 让 这 些 变 量 的 数值 ， 显 示 


在 同一 行 的 信息 里 ， 例 如 【32 32 52】。 


2.2.11 删除 运算 符 


JavaScript 语言 中 的 删除 运算 符 (delete operator) ， 仅 用 来 删除 特定 对 象 实例 的 特定 属性 。 关 


删除 运算 符 的 运用 ， 可 参考 如 下 示例 。 


【2-2-11-delete-operator.js】 


let person = {name: 'Ivory', gender: 'female', age: '30'} ; 
let colors = ['RoyalBlue', 'GreenYellow', 'Gold', 'Cyan'] ; 


Var num01 = 123 ; 
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【相关 说 明 】 


此 语句 声明 了 初始 数据 为 对 象 实例 的 变量 person。 


此 语句 声明 了 初始 数据 为 数组 实例 的 变量 colors。 


无 论 有 无 通过 关键 字 var 或 let 进行 声明 ， 这 3 个 语句 分 别 声明 了 初始 数据 为 不 同 整数 的 变量 


num01、num02 与 num03 。 


此 语句 使 用 关键 字 delete， 并 配合 点 运算 符 【.】， 可 删除 变量 person 的 对 象 实例 的 属性 name。 


此 语句 使 用 关键 字 delete， 并 配合 中 括号 运算 符 []， 可 在 变量 colors 数组 实例 中 ， 仅 删除 索引 
值 为 1 的 元 素数 据 'GreenYellow'， 但 是 此 元 素 占用 的 缓存 空间 ， 仍 然 保 留 在 其 数组 实例 中 。 


通过 这 3 个 语句 , 试图 删除 变量 num01、num02 与 num03; 然而 实际 上 , 仅 有 未 通过 var 或 let 
关键 字 ， 加 以 声明 的 变量 num03， 可 以 被 成 功 删 除 。 
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console.log (person.name) ; 


【person.name】 会 返回 undefined， 即 代表 变量 person 的 属性 name， 已 被 删除 了 。 


console.log(person) ; 

此 语句 只 会 产生 {gender: "female", age: "30"} 的 信息 。 由 此 可 见 ， 属 性 name 和 其 数据 'Ivory' 已 
被 删除 了 。 

console.log(colors[1]) ; 

colors[1] 在 此 返回 undefined， 即 代表 变量 colors 中 的 索引 值 为 1 的 数据 ， 已 经 被 清除 了 。 


console.log(colors) ; 


此 语句 会 产生 ["RoyalBlue", empty, "Gold", "Cyan"] 的 信息 ， 可 看 出 colors[1] 对 应 的 元 素数 据 已 
经 被 清除 了 ， 才 会 被 标记 为 empty。 


console.1log (num01) ; 
console.log (num02) ; 


查看 这 两 个 语句 所 产生 的 信息 ， 可 得 知 变量 num01 与 num02 并 未 被 删除 ! 那 是 因为 这 两 个 变 
量 ， 是 借助 var 或 let 关键 字 ， 来 加 以 声明 的 。 

console.1og (num03) ; 

执行 此 语句 时 , 会 产生 【num03 is not defined 参考 错误 (reference error) 】 的 信息 。 由 此 可 知 ， 
变量 num03 确实 被 删除 Te 


2.2.12 ”运算 符 的 优先 级 (ES6) 
在 特定 表达 式 中 , 运算 符 的 优先 级 (operators precedence) 可 用 来 决定 各 子 表达 式 的 执行 顺序 。 
在 相 邻 的 子 表达 式 中 ， 其 运算 符 优先 级 较 高 的 子 表达 式 ,会 先 被 执行 。 关 于 各 运算 符 的 优先 级 ， 轴 
表 2-5 所 示 。 
表 2-5 运算 符 的 优先 级 


和 用 过 2 a 
访问 属性 或 函数 
访问 子 元 素 或 定义 数组 实例 的 元 素 个 数 a] 
创建 特定 对 象 【 非 】 默 认 的 实例 无 new .. (.. ) 
调用 特定 函数 由 左 至 右 a 
18 创建 特定 对 象 默认 的 实例 由 右 至 左 new .. 
17 评估 后 再 递增 无 _ 4 


评估 后 再 递减 EE 
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( 续 表 ) 
优先 级 用 途 关联 性 运算 符 
逻辑 非 运算 ww 
按 位 非 运算 5 
正 值 条 二 
负 值 - - 
先 递增 再 评估 ++ 
先 递减 再 评估 -- 
返回 数据 类 型 typeof .. 
即 调用 匿名 函数 void .… 
除 特定 数据 delete .… 
等 待 评估 后 的 数据 await .… 
下 下 全 A 
Ee 字 os 
由 左 至 右 二 二 总 
oe 


me 


玉生 二 

按 位 右 移 运 算 

按 位 无 符号 右 移 运算 
比较 小 于 的 关系 
比较 小 于 或 等 于 的 关系 
比较 大 于 的 关系 


比较 大 于 或 等 于 的 关系 
判断 是 否 存在 特定 属性 
判断 是 否 为 特定 对 象 的 实例 


1 左 至 右 


由 左 至 右 


判断 数据 是 否 相等 


判断 数据 是 否 不 相等 


判断 数据 【和 】 类 型 是 否 都 相同 


【或 】 类 型 是 否 不 相同 


! 
8 a 四 A 
6 起 过 和 由 左 至 右 8&& .. 
5 逻辑 或 运算 由 左 至 右 wh 
4 条 件 运 算 由 右 至 左 Ds 
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( 续 表 ) 


优先 级 用 途 关联 性 运算 符 


E 成 器 中 的 特定 数据 
生成 器 中 的 特定 数据 


2.3 练 习 题 


1. 在 JavaScript 语言 里 ， 下 列 哪些 项 目 是 常量 ? 

770、Math.PI、'Nice Day'、"good"、 NM\w'\s\d/g、 /.\w.\d/、TRUE、FALSE、Undefined、Null。 

2. 在 JavaScript 语言 里 ， 应 该 通过 什么 语法 声明 名 称 为 love_you_forever 而 代表 着 整数 值 
201314 的 常量 ? 

3. 在 JavaScript 语言 里 ， 应 该 通过 什么 语法 声明 名 称 为 love_me_longer 而 代表 府 
2591.8 的 常量 ? 

4. 在 如 下 JavaScript 源 代码 片段 里 ， 哪 些 是 全 局 变量 ? 哪些 是 局 部 变量 ? 


let value01 = 10 : 
var value02 = 30 : 


function func0l(data, identity) 
{ 
let result ; 


result = 21 + data + 2 * identity ; 
return result ; 
} 


Var str01 = 'Finished', str02 = 'Error' ; 


function func02(amount, price) 
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{ 
let output ; 


output = (value01 + value02 + price) * amount ; 
return output ; 
} 


5. 在 如 下 JavaScript 源 代码 片段 里 ， 请 至 少 列举 出 其 中 的 5 个 表达 式 。 

sphere volume = r => 4 / 3 * Math.PI * Math.pow(r, 3) ; 

6. 编写 带 有 上 底 宽度 、 下 底 宽度 和 高 度 3 个 参数 ， 可 计算 并 返回 梯形 面积 的 函数 定义 。 
7. 编写 带 有 长 轴 长 度 、 短 轴 长 度 2 个 参数 ， 可 计算 并 返回 椭圆 面积 的 函数 定义 。 

8. 如 下 源 代码 被 执行 之 后 ， 变 量 result 的 结果 数据 是 什么 ? 


let result, n01 = 10, n02 = 20， 
result = n01++ + ++n02 % 6 7 


9. 如 下 源 代码 被 执行 之 后 ， 变 量 result 的 结果 数据 是 什么 ? 


let result, n03 = 30, n04 = 40 ; 
result = n03-- - --n04 % .63 


10. 如 下 源 代码 被 执行 之 后 ， 变 量 result 的 结果 数据 是 什么 ? 


let result, n05 = 50, n06 = 60 : 
OBult s(n05 /S00 WlO) 下 二 人 


11. 如 下 源 代码 被 执行 之 后 ， 变 量 result 的 结果 数据 是 什么 ? 

let result，n07 = 70, n08 = 80 : 

result = (n07 / 10) ** 2 + (n08 / 20) ** 0.5 了 

12. 通过 编写 条 件 运算 符 【? ... :】 相 关 的 源 代码 来 实现 下 述 功 能 。 

已 知 两 个 变量 score 和 rating。 当 score 的 数值 低 于 60 时 ， 变 量 rating 的 数据 为 字符 串 'failed'; 
当 score 的 数值 大 于 或 等 于 60 而 小 于 80 时 ， 变 量 rating 的 数据 为 字符 串 'passed'; 当 score 的 数值 
大 于 或 等 于 80 而 小 于 或 等 于 100 时 ， 变 量 rating 的 数据 为 字符 串 'nice'， 当 score 的 数值 超过 100 
时 ， 变 量 rating 的 数据 为 字符 串 'error'。 

13. 至 少 列举 类 型 运算 符 typeof 表达 式 可 返回 的 5 种 数据 类 型 。 


第 2 章 


数据 类 型 


不 同 的 编程 语言 存在 不 同 的 数据 类 型 (data type) ， 各 种 数据 类 型 可 用 来 描述 容纳 特 不 同 数据 
的 数据 结构 (data structure) 。 特 定 表 达 式 被 评估 时 ， 可 返回 特定 类 型 的 数据 。 


JavaScript 语言 的 数值 , 不 仅 包括 整数 (integer), 也 包含 带 有 小 数 部 分 的 浮 


number) 。 


3.1.1 


3.1 数值 类 型 


2" 进 制 的 字面 量 (ES6) 


数 (floating-point 


2" 进 制 主要 是 指 二 进 制 、 八 进 制 与 十 六 进 制 。 在 JavaScript 语言 中 ， 可 通过 2" 进 制 的 字面 量 
(literal) ， 来 表示 2" 进 制 的 数字 常量 (number constant) / 数值 (number value) 。 


【3-1-1-nth-power-of-2-based-literals.js】 


var 
var 
var 
var 
var 
var 
var 
var 


number01 
number02 
number03 
number04 
number05 
number06 
number07 
number08 


111 ; 
parseInt('111', 16) ; 
0x111 ; 


parseInt('111', 8) ; 
00111 ; // new literal in ES6 
parseInt('111', 2) ; 
0b1l11 ; // new literal in ES6 


console.log (number01) ; 


console.log (number02) ; 


console.log (number03) ; 


0111 ; // cannot use in strict mode. 
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console . 
console. 
console. 
console. 
console. 


log (number04) ; 
log (number05) ; 
log (number06) ; 
log (number07) ; 
log (number08) ; 


【相关 说 明 】 


Var number01 = 111 ; 


111 代表 十 进 制 的 数值 111。 


Var number02 = parseInt('111', 16) ; 


parseInt(111',16) 返 


var number03 = 0xl11 ; 


4 数值 111。 因 此 ， 变 量 number03 的 初始 数值 ， 会 成 为 十 六 进 制 数值 111 


0x111 代表 十 六 进 制 


所 对 应 的 十 进 制 数值 273 。 


Var number04 = 0111 ; 


var number06 = 00111 ; 


回 十 六 进 制 数 值 111 所 对 应 的 十 进 制 数 值 273。 


// cannot use in strict mode. 
0111 代表 八进制 的 数值 111。 因 此 ， 变 量 number04 的 初始 数值 ， 会 成 为 八进制 数值 111 所 对 
应 的 十 进 制 数值 73。 
Var number05 = parseInt('111', 8) ; 


parseInt(111', 8) 会 返回 八进制 数值 111 所 对 应 的 十 进 制 数值 73。 


0o111 代表 八进制 的 数值 1 
对 应 的 十 进 制 数值 73。 
Var number07 = parseInt('111', 2) ; 


parseInt(111', 2) 会 返回 二 进 制 数 值 111 所 对 应 的 十 进 制 数 值 7。 


Var number08 = 0bl1ll ; 


0b111 代表 二 进 制 的 数值 1 
对 应 的 十 进 制 数值 7。 


// new literal in ES6 


1。 因 此 ， 变 量 number06 的 初始 数值 ， 会 成 为 八进制 数值 111 所 


// new literal in ES6 


1。 因 此 ， 变 量 number08 的 初始 数值 ， 会 成 为 二 进 制 数值 111 所 


3.1.2 ”数值 的 比较 (ES6) 


要 比较 两 个 数值 类 型 的 操作 数 (operand) 的 数值 (number value) 是 相等 、 不 相等 、 大 于 或 小 


于 的 关系 ， 必 须 通 过 带 有 特定 比较 运算 符 的 表达 式 来 实现 。 关 于 数值 的 比较 ， 可 参考 如 下 示例 。 


【3-1-2-number-comparisons.js】 


console.1log(3 + 0.1416 
console.1og(0.5 + 0.25 
console. 


log(''); 


console.1log(0.1 + 0.02 === 


3.1416) ; 
和 35》 了 


0.12)°4 
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0.1 : 

b 0.02 :; 

C 0.12 

console.log(a + b === c) ; 

console.log(Math.abs(a + b - c) < Number.EPSILON) ; 


【相关 说 明 】 


console.log(3 + 0.1416 
console.log(0.5 + 0.25 


在 这 两 个 语句 中 的 比较 表达 式 里 ， 比 较 运算 符 【= 一 】 两 侧 操作 数 的 数值 ， 被 判断 为 均 相等 ， 
以 及 其 数据 类 型 均 为 浮 点 数 (floating-point number) 。 


console.1lo0g('') 


a 


3.1416) ; 
0.75) ; 


console.1log(0.1 + 0.02 === 0.12) ; 

在 这 个 语句 中 ， 虽 然 比 较 运 算 符 【一 =】 两 侧 的 数值 ， 看 起 来 是 相等 的 ， 但 是 判断 的 结果 却 为 
假 而 返回 布尔 值 false。 

计算 机 的 浮 点 数 表 示 法 ， 无 法 完整 表示 大 部 分 的 浮 点 数 ， 所 以 计算 机 进行 浮 点 数 的 运算 时 ， 
常常 会 出 现 小 数 部 分 的 截断 误差 (truncation error) 。 看 似 简单 浮 点 数 的 比较 运算 ， 对 计算 机 来 说 ， 
反而 是 困难 的 任务 。 


a=0.1} 
b=0.02; 
c=0.12.} 


这 3 个 语句 声明 了 初始 数值 为 不 同 浮 点 数 的 变量 a、b 与 c。 
Console.log(a + b === c) ; 
虽然 比较 运算 符 【 一 =】 两 侧 的 数值 ， 看 起 来 是 相等 的 ， 但 是 判断 的 结果 却 为 假 而 返回 布尔 什 


false。 


console.1log (Math.abs(a + b - c) < Number.EPSILON) ; 


【Number EPSILON 是 内 署 对 象 Number 中 的 常量 属性 EPSILON, 用 来 表示 
可 被 容忍 的 截断 误差 值 。 因此, 欲 正 确 比 较 浮 点 数 , 表达 式 [a + b = 一 c】 应 该 被 改写 成 为 (Math.abs(a 
+b-c)<Number EPSILON】。 


3.1.3 ”数值 的 正 负 符 号 (ES6) 


T 


在 JavaScript 语言 中 ， 数 值 可 以 是 负数 、 正 数 或 零 值 ， 而 且 零 值 还 可 以 分 为 正 零 和 负 零 。 关 于 
数值 的 正 负 符号 的 判断 与 诠释 ， 可 参考 如 下 示例 。 


【3-1-3-number-sign-deteminations.js】 


console.log (Math.sign(0)) ; 
console.log (Math.sign(-0)) ; 


console.log (Math.sign(123)) ; 
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console.1log (Math.sign(-123)) ; 
console.1log (Math.sign (nu11)) ; 


console.log (Math.sign (NaN)) ; 
console.1og (Math.sign('Hello')) ; 
console .1og (Math.sign (undefined)) ; 


【相关 说 明 】 

函数 Math.sign( 特 定 变量 名 称 ) 的 返回 值 ， 可 用 来 判断 特定 变量 的 如 下 特征 : 

其 返回 值 为 0， 代表 特定 变量 的 数值 亦 为 0。 

其 返回 值 为 -0， 代 表 特 定 变量 的 数值 亦 为 -0。 

其 返回 值 为 1， 代 表 特 定 变量 的 数值 为 正 数 ， 例 如 123、23.8、1250.75。 

其 返回 值 为 -1， 代 表 特 定 变量 的 数值 为 负数 ， 例 如 -123、-29.15、-2500.88。 

其 返回 值 为 NaN (notanumber )， 代 表 特 定 变量 的 数据 ， 无 法 被 转换 成 为 数值 ， 例 如 NaN、 
undefined、'Hello'、'125a'。 


console.log (Math.sign(0)) ; 


Math.sign(0) 的 返回 值 为 0。 
console.log (Math.sign(-0)) ; 
Math.sign(-0) 的 返回 值 为 -0。 
console.log (Math.sign(123)) ; 
Math.sign(123) 的 返回 值 为 1。 
console.log (Math.sign(-123)) ; 


Math.sign(-123) 的 返回 值 为 -1。 


console.log (Math.sign(null)) ; 
Math.sign(null) 的 返回 值 为 0。 
console.log (Math.sign (NaN)) ; 


Math.sign(NaN) 的 返回 值 为 NaN。 其 中 ，NaN 的 含义 表示 并 非 一 个 数值 (nota number) 。 


console.log (Math.sign('Hello')) ; 


Math.sign(Hello) 的 返回 值 为 NaN。 


console.log (Math.sign(undefined)) ; 


Math.sign(undefined) 的 返回 值 为 NaN。 


3.1.4 数值 的 截断 〈ES6 ) 


数值 的 截断 〈truncation) ， 是 指 对 于 特定 浮 点 数 ， 先 进行 无 条 件 或 四 含 五 入 的 数值 修 约 ， 再 
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去 除 其 小 数 ， 转 换 成 为 整数 的 过 程 。 关 于 数值 的 截断 的 综合 运用 ， 可 参考 如 下 示例 。 


【3-1-4-number-truncations.js】 


【相关 说 明 】 


这 4 个 语句 声明 了 初始 数据 为 不 同 浮 点 数 的 变量 v01、v02、v03 与 v04。 


调用 内 置 函数 parseInt(v01)， 会 返回 变量 v01 的 数值 12.5 的 整数 部 分 12。 


调用 内 置 函 数 Math.trunc(v01)， 会 返回 变量 v01 的 数值 12.5 的 整数 部 分 12。 
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console.1log (Math.floor(v01)) ; 


调用 内 置 函数 Math.floor(v01)， 会 返回 小 于 但 接近 变量 v01 的 数值 12.5 的 整数 值 12 。 


console.log (Math.round(v01)) ; 


调用 内 置 函 数 Math.round(v01), 会 返回 对 变量 v01 的 数值 12.5 进行 四 会 五 入 之 后 的 整数 值 13。 


console.1log (Math.ceil (v01)) ; 


调用 内 置 函 数 Math.ceil(v01)， 会 返回 大 于 但 接近 变量 v01 数值 12.5 的 整数 值 13。 


console.log (parseInt (v02)) ; 


调用 内 置 函数 parseInt(v02)， 会 返 


console.log (Math.trunc (v02)) ; 


调用 内 置 函数 Math.trunc(v02)， 会 返 


console.1og (Math.floor (v02)) ; 


变量 v02 的 数值 12.3 的 整数 部 分 12。 


巨 


| 


变量 v02 的 数值 12.3 的 整数 部 分 12。 


调用 内 置 函 数 Math.floor(v02)， 会 返回 小 于 但 接近 变量 v02 的 数值 12.3 的 整数 值 12。 
console.1log (Math.round (v02)) ; 

调用 内 置 函数 Math round(v02)， 会 返回 对 变量 v02 的 数值 12.3 进行 四 会 五 入 之 后 的 整数 值 12。 
console.log (Math.ceil (v02)) ; 
调用 内 置 函数 Math.ceil(v02)， 会 返回 大 于 但 接近 变量 v02 的 数值 12.3 的 整数 值 13。 
console.1log (parseInt (v03)) ; 
调用 内 置 函数 parseInt(v03)， 会 返回 变量 v03 的 数值 0.56 的 整数 部 分 0。 
console.log (Math.trunc (v03)) ; 
调用 内 置 函数 Math.trunc(v03)， 会 返 


console.1log (Math.floor (v03)) ; 


调用 内 置 函 数 Math.floor(v03)， 会 返 


变量 v03 的 数值 0.56 的 整数 部 分 0。 


互 


小 于 但 接近 变量 v03 的 数值 0.56 的 整数 值 0。 


console .1log (Math.round (v03)) ; 
调用 内 置 函 数 Math round(v03)， 会 返回 对 变量 v03 的 数值 0.56 进行 四 会 五 入 之 后 的 整数 值 1。 
console.log (Math.ceil (v03)) ; 


调用 内 置 函 数 Math.ceil(v03)， 会 返回 大 于 但 接近 变量 v03 的 数值 0.56 的 整数 值 1。 


console.log (parseInt (v04)) ; 


调用 内 置 函数 parseInt(v04)， 会 返回 变量 v04 的 数值 -0.83 的 整数 部 分 0。 


console.log (Math.trunc (v04)) ; 


调用 内 置 函数 Math.trunc(v04)， 会 返回 变量 v04 的 数值 -0.83 的 负 整 数 部 分 -0。 


console.log (Math.floor (v04)) ; 
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五 


调用 内 置 函数 Math.floor(v04)， 会 返 


console.1log (Math.round (v04)) ; 


调用 内 置 函 数 Math round(v04)， 会 返 


console.log (Math.ceil (v04)) ; 


小 于 但 接近 变量 v04 的 数值 -0.83 的 整数 值 -1。 


五 


对 变量 v04 的 数值 -0.83 进行 四 合 五 入 之 后 的 整数 值 -1。 


调用 内 置 函 数 Math.ceil(v04)， 会 返回 大 于 但 接近 变量 v04 的 数值 -0.83 的 负 整 数值 -0。 
console.10g(0 === -0) ; 
【0 一 = -0】 返 回 布 尔 值 tue， 所 以 0 与 -0 的 数值 相等 、 数 据 类 型 相同 。 


console.1log(+0 


【+0 = 一 -0】 返 回 布尔 值 tue， 所 以 +0 与 -0 的 数值 相等 、 数 据 类 型 相同 。 


20) 


3.1.5 ”数值 的 特殊 格式 (ECMA-402) 


在 此 ， 数 值 的 特殊 格式 ， 是 指 千 分 位 (thousands) 或 者 货币 (currency) 形式 的 数值 表示 方式 。 
关于 数值 的 特殊 格式 的 综合 运用 ， 可 参考 如 下 示例 。 


【3-1-5-number-formattings.js } 


var nf en = Intl.NumberFormat ("en") ; 
var nf de = Intl.NumberFormat ("de") ; 


var number01 = 2533591.8 ; 


console.log(nf en.format (number01)) ; 
console.log (nf de.format (number01)) ; 
console.1log('') ; 


console.log (number01.toString()) ; 
console.1log (number01.toLocaleString()) ; 
console.10g('') ; 


console.log (number01.toLocalestring('en')) ; 
console.log (number01.toLocaleString('de')) ; 
console.10g('') ; 


// currency number format 

var cnf cn = Intl.NumberFormat ('cn', {style: 'currency', currency: 'cny'}) ; 

var cnf jp = Intl.NumberFormat ('jp', {style: 'currency', currency: 'jpy'}) ; 

var cnf en = Int1.NumberFormat ('en', {style: 'currency', currency: 'usd'}) ; 

var cnf uk = Int1.NumberFormat ('gb', {style: 'currency', currency: 'gbp'}) ; // Great Britain 
Pound 

Var cnf de = Int1.NumberFormat ('de', {style: 'currency', currency: "eur'}) ; 


var price01 = 25324700.56 ; 
console.log (cnf cn.format (price01)) ; 


console.log (cnf jp.format (price01)) ; 
console.1log (cnf en.format (price01)) ; 
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console.log (cnf uk.format (price01)) ; 
console.log (cnf de.format (price01)) ; 


【相关 说 明 】 
var nf en = Intl.NumberFormat ("en") ; 
IntLNumberFormat 对 象 的 构造 函数 IntLNumberFormat("en")， 会 返回 【以 字符 串 形式 ， 表 示 英 
文 (en, English) 数值 格式 (number format) 】 的 IntLNumberFormat 对 象 实例 。 因 此 ， 后 续 源 代码 ， 
可 借助 其 数据 为 IntLNumberFormat 对 象 实例 的 变量 nf_en, 将 特定 数值 ， 表示 成 为 英文 数值 格式 化 
之 后 的 字符 串 。 


var nf de = Intl.NumberFormat ("de") ; 


Intl.NumberFormat("de") 会 返回 【 以 字符 串 形式 , 表示 德 文 / 德国 (de, DENIC eG for Germany) 
数值 格式 】 的 IntLNumberFormat 对 象 实例 。 因此, 后 续 源 代码 ,可 借助 其 数据 为 IntLNumberFormat 
对 象 实例 的 变量 nf de， 将 特定 数值 ， 表 示 成 为 德 文 数值 格式 化 之 后 的 字符 串 。 

var number01 = 2533591.8 ; 

此 语句 声明 了 初始 数据 为 2533591.8 的 变量 number01。 

console.log(nf en.format (number01)) ; 

因为 变量 nf en 的 数据 为 IntLNumberFormat 对 象 实例 ， 所 以 存在 可 调用 的 函数 format()。 
nf_en.format(number01) 会 返回 【将 变量 number01 的 数值 2333591.8， 表 示 成 为 英文 数值 格式 化 】 之 
后 的 字符 串 "2,533,591.8"。 

console.log(nf_de.format (number01)) ; 

nf_en.format(number01) 会 返回 【将 变量 number01 的 数值 2533591.8， 表 示 成 为 德 文 数值 格式 
化 】 之 后 的 字符 串 "2.533.591,8"。 


console.1log('') ; 


console .1log (number01.toString()) ; 

number01.toString() 仅 会 返回 【将 变量 number01 的 数值 2533591.8， 转 换 成 为 字符 串 】 之 后 的 
"2533591.8"。 

console.log (number01.toLocaleString()) ; 

number01.toString() 仅 会 返回 【将 变量 number01 的 数值 2533591.8， 表 示 成 为 本 地 语言 的 数值 
格式 化 】 之 后 的 "2,533,591.8"。 在 此 ， 本 地 语言 为 中 文 (cn, China) 。 


console.10g('') ; 


console.log (number01.toLocaleSstring('en')) ; 


console.log(number01.toLocaleString('en')) 和 如 下 源 代码 片段 之 一 ， 存 在 着 异曲同工 之 妙 : 


® varnf en= Intl.NumberFormat("en"); 
console.log(nf en.format(number01)); 


® console.log(Intl.NumberFormat("en").format(number01)); 
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console.log (number01.toLocalestring('de')) ; 
number01.toLocaleString('de') 和 如 下 源 代 码 片段 之 一 ， 存 在 着 异曲同工 之 妙 : 


® varnf de= Intl.NumberFormat("de"); 
console.log(nf de.format(number01)) ; 
® console.log(Intl.NumberFormat("de").format(number01)) ; 


console.1log('') ; 


// currency number format 

Var cnf_cn = Intl.NumberFormat ('cn', {style: ‘'currency', currency: "cny'}) ; 

Intl.NumberFormat 对 象 的 构造 函数 IntLNumberFormat('cn'，fstyle: 'currency', currency: 'cny'})， 
会 返回 【以 字符 串 形式 ， 表 示 中 文 / 中 国 (cn, China) 与 人 民 币 (cny, China Yuan) 的 数值 格式 】 
的 IntLNumberForma 对 象 实例 。 后 续 源 代码 ， 可 借助 其 数据 为 ntLNumberFormat 对 象 实例 的 变量 
cnf cn， 将 特定 数值 ， 表 示 成 为 中 文 与 人 民 币 的 数值 格式 化 之 后 的 字符 串 。 


var cnf_jp = Intl.NumberFormat ('jp', {style: 'currency', currency: 'jpy'}) ; 


加 


Intl.NumberFormat('jp', {style: 'currency', currency: jpy'}), 会 返回 【以 字符 串 形式 , 表示 日 文 (jp， 
Japan) 与 日 币 (jpy, Japan Yuan) 的 数值 格式 】 的 IntLNumberFormat 对 象 实例 。 后 续 源 代 码 ， 可 
普 助 其 数据 为 IntLNumberFormat 对 象 实例 的 变量 cnf jp， 将 特定 数值 ， 表 示 成 为 日 文 与 日 币 的 数 
值 格式 化 之 后 的 字符 串 。 


Var cnf_en = Int1.NumberFormat ('en', {style: 'currency', currency: 'usd'}) ; 


Intl.NumberFormat('en', {style: 'currency', currency: "usd"}), 会 返回 【以 字符 串 形式 , 表示 英文 (en， 
English) 与 美元 (usd, United States Dollar) 的 数值 格式 的 IntLNumberFormat 对 象 实例 。 后 续 源 代 
码 可 借助 其 数据 为 ntLNumberFormat 对 象 实例 的 变量 cnf en， 将 特定 数值 ， 表 示 成 为 英文 与 美元 
的 数值 格式 化 之 后 的 字符 串 。 


var cnf uk = Int1.NumberFormat ('gb', {style: 'currency', currency: 'gbp'}) ; // Great Britain 
Pound 


Intl.NumberFormat('gb'，{style: 'currency', currency: 'gbp'})， 会 返回 【以 字符 串 形式 ， 表 示 英 式 
英文 (gb, Great Britain) 与 英镑 (gbp, Great Britain Pound) 的 数值 格式 】 的 Intl.NumberFormat 对 
象 实例 。 后 续 源 代 码 可 借助 其 数据 为 ntLNumberFormat 对 象 实例 的 变量 cnf uk， 将 特定 数值 ， 表 
示 成 为 英 式 英文 与 英镑 的 数值 格式 化 之 后 的 字符 串 。 

var cnf_de = Int1.NumberFormat ('de', {style: 'currency', currency: 'eur'}) ; 

Intl.NumberFormat('de', {style: 'currency', currency: 'eur'}) 会 返回 【以 字符 串 形式 ， 表 示 德 文 / 德 
(de, DENIC eG for Germany) 与 欧元 (eur, Euro) 的 数值 格式 】 的 对 象 实例 。 后续 源 代码 可 借 
其 数据 为 IntLNumberFormat 对 象 实例 的 变量 cnf_de， 将 特定 数值 ， 表 示 成 为 德 文 与 欧元 的 数值 格 
式 化 之 后 的 字符 串 。 


var price01 = 25324700.56 ; 


此 语句 声明 了 初始 数据 为 25324700.56 的 变量 price01。 
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console 


.log(cnf_cn.format (price01)) ; 


因为 变量 cnf cn 是 IntLNumberFormat 对 象 实例 ， 所 以 存在 可 调用 的 函数 format()。 


cnf_ cn.format(price01) 会 返回 【将 变量 price01 的 数值 25324700.56， 表 示 成 为 人 民 币 数值 格式 化 】 
之 后 的 字符 串 "CN¥25,324,700.56"。 


console 


.log(cnf jp.format (price01)) ; 


cnf jp.format(price01) 会 返回 【将 变量 price01 的 数值 23324700.56， 表 示 成 为 日 币 数值 格式 化 】 


之 后 的 字符 串 "JP¥25,324,701"。 


console 


console 


cnf en.format(price01) 会 返 [E 
之 后 的 字符 串 "$25,324,700.56"。 
console. 


cnf_uk.format(price01) 会 返回 
之 后 的 字符 串 "£25,324,700.56"。 


.log(cnf en.format (price01)) ; 


【将 变量 price01 的 数值 25324700.56, 表示 成 为 美元 数值 格式 化 】 


log (cnf uk.format (price01)) ; 


【将 变量 price01 的 数值 25324700.56, 表示 成 为 英镑 数值 格式 化 】 


.log(cnf de.format (price01)) ; 


cnf_de.format(price01) 会 返回 【将 变量 price01 的 数值 25324700.56， 表 示 成 为 德 文 与 欧元 的 数 
值 格式 化 】 之 后 的 字符 串 "£25,324,700.56"。 
关于 语言 代码 (language code) ， 例 如 cn、en、gb 等 ， 以 及 货币 代码 (currency code) ， 例 如 


cny、usd、g| 


bp 等 ， 可 参考 如 下 网 址 的 内 容 : 


@ 语言 代码 : ”en.wikipedia.org/wiki/Language_code 
@ 货币 代码 : en.wikipedia.org/wiki/ISO 4217 


3.1.6 ”整数 值 的 安全 范围 (ES6) 


简单 来 说 ，JavaScript 语言 的 整数 值 的 安全 范围 是 -23 - 1) ~ +(2”- 1)。 关 于 整数 值 的 安全 范围 
的 理解 ， 可 参考 如 下 示例 。 


【3-1-6-number-safe-ranges.js】 


console. 
console. 


console. 
console. 


console. 
console. 


console. 


console. 


console. 
console. 


10g (Number .isNaN (NaN)) ; 
10g (Number .isNaN (123)) ; 


log (Number .isFinite(456)) ; 
log (Number .isFinite (NaN)) ; 


log (Number .isFinite (Infinity)) ; 
log (Number .isFinite(-Infinity)) ; 


XO Ts 
log (Number .isSafeInteger (Math.pow(2, 48) + 100)) ; 


log (Number .isSafeInteger (Math.pow(2, 53) - 1)) ; 
log (Number .isSafeInteger (Math.pow(2, 53))) ; 
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【相关 说 明 】 
函数 NumberisNaN( 特 定 变量 名 称 ) 的 返回 值 ， 可 用 来 判断 特定 变量 的 数值 ， 是 否 并 非 一 个 数 
值 Cnotanumber) : 


日 其 返回 值 为 tue， 代 表 特 定 变量 的 数值 ， 并 不 是 一 个 数值 。 
日 其 返回 值 为 false， 代 表 特 定 变量 的 数值 ， 是 一 个 数值 。 


console.1og (Number .isNaN (NaN)) ; 


Number.isNaN(NaN) 的 返回 值 为 true。 

console.1og (Number .isNaN (123)) ; 

Number.isNaN(123) 的 返回 值 为 false。 函 数 Number.isFinite( 特 定 变 量 名 称 ) 的 返回 值 , 可 用 来 判 
断 特定 变量 的 数值 ， 是 否 为 有 限 (finite》 的 数值 : 

”其 返回 值 为 true， 代 表 特定 变量 的 数值 ， 是 计算 机 可 明确 表示 的 数值 。 

日 其 返回 值 为 se， 代表 特定 变量 的 数值 ， 并 不 是 计算 机 可 明确 表示 的 数值 。 


console.1og (Number .isFinite(456)) ; 


Number.isFinite(456) 的 返回 值 为 true。 


console.1og (Number .isFinite (NaN)) ; 


Number.isFinite(NaN) 的 返回 值 为 false。 
console.1og (Number .isFinite (Infinity)) ; 


Number.isFinite(Infinity) 的 返回 值 为 false。 


console.1og (Number .isFinite(-Infinity)) ; 

Number.isFinite(-Infinity) 的 返回 值 为 false。 

函数 Number.isSafeInteger( 特 定 变 量 名 称 ) 的 返回 值 ， 可 用 来 判断 特定 变量 的 数值 ， 是 否 为 
IEEE-754 所 规范 的 安全 范围 -22 - 1) ~ +(2”- 1) 里 的 整数 值 : 

@ ”返回 值 为 tue， 代 表 特 定 变量 的 数值 ， 是 安全 范围 内 的 整数 值 。 

ee 返回 值 为 fllse， 代 表 特 定 变量 的 数值 ， 并 不 是 安全 范围 内 的 整数 值 。 


console.log(Number.isSafeInteger(Math.pow(2，48) + 100)) ; 


Math.pow(2, 48) + 100 的 结果 值 为 28 + 100。 
Number.isSafeInteger(Math.pow(2, 48) + 100) 的 返回 值 为 tue。 


console.1og (Number .isSafeInteger (Math.pow(2, 53) - 1)) ; 


Math.pow(2, 53) - 1 的 结果 值 为 23- 1。 
Number.isSafeInteger(Math.pow(2, 53) - 1) 的 返回 值 为 true。 


console.1og (Number .isSafeInteger (Math.pow(2, 53))) ; 


Math.pow(2, 53) 的 返回 值 为 233。 
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Number.isSafeInteger(Math.pow(2, 53)) 的 返回 值 为 false。 
ceonsole.log iath.pow(2 60); 


Math.pow(2, 64) 的 返回 值 ， 理 应 为 24， 也 就 是 18446744073709551616; 但 是 ， 其 真实 的 返回 
值 却 为 18446744073709552000。 所 以 ， 其 最 右 侧 的 4 位 数 ， 明 显存 在 误差 。 有 误差 的 缘故 ， 就 是 
因为 24 已 经 是 超越 安全 范围 的 整数 值 了 。 


3.2 布尔 类 型 


JavaScript 布尔 (boolean) 类 型 的 数据 ， 只 存在 布尔 值 alse《〈 假 )》 和 布尔 值 rue《〈 真 )》 两 个 组 合 。 
其 中 ，false 代表 假 、 否 、 非 、 不 对 、 不 是 等 不 成 立 的 含义 ， true 则 代表 真 、 对 、 是 等 成 立 的 含义 。 


【3-2---Boolean-data-type.js】 
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【相关 说 明 】 


此 语句 声明 了 初始 数据 为 false 的 变量 passed， 以 及 初始 数据 为 0 的 变量 score。 


此 语句 赋予 整数 值 80 给 变量 score。 


在 此 ，【score > 60】 是 比较 运算 式 ， 得 出 来 的 结果 值 为 布尔 值 trtue， 并 被 赋 给 变量 passed。 


此 语句 赋予 整数 值 55 给 变量 score。 


此 语句 将 【score > 60】 的 结果 值 人 lse， 赋 给 变量 passed。 
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此 语句 声明 了 变量 conversion 。 
conversion = Boolean(-10.8) ; 


-10.8 是 一 个 非 0 的 数值 , 因此 , 经 过 Boolean 对 象 的 构造 函数 Boolean() 处 理 之 后 , 会 返回 true。 


console.1log (conversion) ; 


conversion = Boolean(15.6) ; 


15.6 是 一 个 非 0 的 数值 ， 因 此 ， 经 过 Boolean 对 象 的 构造 函数 Boolean() 处 理 之 后 ， 会 返 


true。 


加 


console.1log (conversion) ; 
console.1log('') ; 


/1 
conversion = Boolean(0) ; 


conversion = Boolean(null) ; 
conversion = Boolean(false) ; 
conversion = Boolean('') ; 


conversion = Boolean(undefined) ; 


在 前 段 各 语句 中 ， 无 论 是 0、null、false、 空 字符 串 " 或 undefined， 均 是 具有 和 零 值 意义 的 常量 ， 
经 过 构造 函数 Boolean0) 的 处 理 之 后 ， 均 会 返回 false。 


console.log (conversion) ; 
console.1log('') ; 


conversion = new Boolean(-10.8) ; 
conversion = new Boolean(15.6) ; 


Conversion = new Boolean(0) ; 
在 前 段 各 语句 中 ， 构 造 函数 Boolean() 左 侧 被 衔接 了 关键 字 new， 使 得 变量 conversion 的 数据 ， 
成 为 内 含 布尔 值 true 或 false 的 Boolean 对 象 实例 。 


console.log (conversion.valueOf ()) ; 


调用 conversion.valueOf() 函 数 ， 可 返回 变量 conversion 内 含 的 布尔 值 true 或 false。 


3.3 数组 类 型 


数组 (array) 是 用 来 表示 一 组 【具有 各 自 数据 】 的 元 素 。 然而， 就 JavaScript 语言 来 说 ， 其 数 
组 实例 的 数据 类 型 (data type) 为 对 象 类 型 。 数 组 实例 中 各 元 素 的 数据 ， 可 以 同时 存在 数值 、 布 尔 
值 、 字 符 串 、 对 象 ， 甚 至 是 子 数组 ! 关于 数组 类 型 的 综合 运用 ， 可 参考 如 下 示例 。 


【3-3---Array-data-type.js】 


【相关 说 明 】 


此 语句 声明 了 初始 数据 为 内 含 多 个 整数 元 素 的 数组 实例 [520，530，1314,2013，2014] 的 变量 


numbers。 


此 语句 声明 了 初始 数据 为 数组 实例 [Tommy', 'male', 33, [180, 72]] 的 变量 profile。 


new Array(6) 会 返回 内 含 6 个 空 元 素 的 数组 实例 。 此 语句 声明 了 初始 数据 为 内 含 6 个 空 元 素 的 
数组 实例 的 变量 newone。 


在 网 页 浏览 器 的 调试 工具 【Console】 面 板 中 ， 显 示 出 [520, 530, 1314, 2013, 2014] 的 信息 。 
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numbers[2] 会 返回 在 变量 numbers 的 数组 实例 中 ， 其 索引 值 为 2 〈 第 3 个 ) 的 元 素 值 1314。 


numbers [1] = 2591.8 ; 


数值 2591.8 被 存 为 在 变量 numbers 数组 实例 中 ， 其 索引 值 为 1 (第 2 个 ) 的 元 素 值 。 


console.log (numbers) ; 


显示 出 [520, 2591.8, 1314, 2013, 2014] 的 信息 。 


console.1og (numbers.length) ; 


numbers.length 会 返回 变量 numbers 数组 实例 中 的 元 素 个 数 。 


console.log (profile) ; 


在 网 页 浏览 器 的 调试 工具 【Console]】 面板 中 ， 显 示 出 可 展开 的 ["Tommy", "male", 33, Array(2)] 
信息 。 

展开 上 述 信 息 之 后 ， 可 看 见 Array(2) 代 表 子 数组 实例 [180, 70]。 在 此 ， 应 该 为 整数 值 72 的 ， 
却 被 显示 为 如 下 屏幕 快照 里 的 整数 值 709， 是 因为 调试 工具 的 运行 机 制 ， 即 时 响应 了 随后 源 代码 的 
执行 结果 。 


(4) ["Tommy", "male”, 33, Array(2)] 


console.log (profile[0]) ; 

profile[0] 会 返回 在 变量 profile 的 数组 实例 中 , 其 索引 值 为 0( 第 1 个 ) 的 元 素 的 数据 "Tommy"。 
console.1og (profile[2]) ; 
profile[2] 会 返回 在 变量 profile 的 数组 实例 中 ， 其 索引 值 为 2 (第 3 个 ) 的 元 素 的 数值 33。 


console.log (Profile[3] [0]) ; 
console.log (profile[3] [1]) ; 


profile[3] 会 返回 在 变量 profile 的 数组 实例 中 ， 其 索引 值 为 3( 第 4 个 ) 的 元 素 的 数据 ， 也 就 是 
子 数组 实例 [180,72]。 

所 以 , profile[3][0] 会 返回 在 子 数组 实例 [180, 72] 中 , 其 索引 值 为 0( 第 1 个) 的 元 素 的 数值 180。 

profile[3][1] 则 会 返回 在 子 数组 实例 [180, 72] 中 ， 其 索引 值 为 1 (第 2 个 ) 的 元 素 的 数值 72。 

profile[3] [1] = 70 ; 

此 语句 使 得 在 profile[3] 所 代表 的 子 数组 实例 [180, 72] 中 ， 其 索引 值 为 1 (第 2 个 ) 的 元 素 的 数 
值 ， 被 修改 成 为 70。 因 此 ， 子 数组 实例 变更 为 [180, 70] 。 

console.1log (profile.length) ; 

profile.length 会 返回 在 变量 profile 的 数组 实例 中 ， 其 第 1 层 元 素 的 个 数 4。 


console.log (profile[3] .length) ; 
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profile[3] 代 表 子 数组 
console.log (numbers[numbers.length]) ; 


numbers.length 会 返 


在 变量 numbers 的 数组 实例 中 ， 若 其 索 弛 


实例 [180, 72]。profile[3].length 会 返回 


子 数组 实例 [180,72] 的 元 素 个 数 2。 


回 变量 numbers 的 数组 实例 中 的 元 素 个 数 5。 


值 为 5， 则 代表 第 6 个 元 素 的 索引 值 。 


在 变量 numbers 的 数组 实例 中 ， 一 开始 六 
numbers[5] 的 语法 ， 会 返回 undefined。 


console.1og (profile[profile.1length]) ; 


profile.length 会 返 


fF 无 第 6 个 元 素 ， 所 以 ，numbers[numbers.length] 如 同 


回 变 量 profile 的 数组 实例 中 的 元 素 个 数 4。 在 变量 profile 的 数组 实例 中 ， 若 


其 索引 值 为 4, 则 代表 第 5 个 元 素 的 索引 值 。 在 变量 profile 的 数组 实例 中 , 一 开始 并 无 第 5 个 元 素 ， 


所 以 profile[profile.length] 如 同 是 profile[4] 的 语法 ， 会 返回 


console.log (newone[0]) ; 
console .1og (newone [newone.length]) ; 


newone.length 会 返 


undefined。 


因为 变量 newone 一 开始 为 内 含 6 个 空 元 素 的 数组 实例 ， 所 以 newone[0] 会 返回 undefined， 
变量 newone 的 数组 实例 中 的 元 素 个 数 6。 在 变量 newone 的 数组 实例 中 ， 若 
代表 第 7 个 元 素 的 索引 值 。 然 而 ， 一 开始 并 无 第 7 个 元 素 ， 所 以 


其 索引 值 为 6， 见 


newone[newone.length] 如 同 是 newone[7] 的 语法 ， 会 返回 


undefined 。 


3.4 对 象 类 型 


对 象 (object) 通过 属性 (property) 和 方 


法 Cmethod) /函数 (function) ， 模 拟 在 真实 世界 中 ， 


具有 身份 数据 (identity data) 和 表现 特征 行为 〈characteristic behavior) 的 物体 (object) 。 关 于 对 


象 类 型 的 理解 ， 可 参考 如 下 示例 。 
【3-4---Object-data-type.js】 


// let item01 = {} ; 
let item01 = new Object() ; 


'Tablet PC' 
item01.price = 1000 ; 

item01.origin = 'China' ; 
item01['manufacture date'] = '2018/12/1 
'RoyalBlue' ; 
"secret data...' ; 


item01.name = 


item01['color'] 
item01[''] 


console.log (item01) ; 
log (item0l[""]) ; 


log (item01 .color) ; 


console. 
console. 
console. 
console.log (item01.price) ; 


item01.price = 900 ; 


5， 


// empty property name 


log (item01['manufacture date']) ; 
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item01l['color'] = "Gold' ; 


console.1og (item01) ; 


【相关 说 明 】 


// let item01 = {} ; 
let item01 = new Object() ; 


通过 关键 字 new 和 Object 对 象 的 构造 函数 Object() 的 语法 , 可 返回 Object 对 象 的 空 实例 (empty 
instance) ， 或 称 为 空 的 Object 对 象 实例 。 在 此 ，【= new ObjectO0】 等 同 于 【= 分 】 的 语法 ， 而 且 
此 语句 声明 了 初始 数据 为 空 的 Object 对 象 实例 的 变量 item01。 

item01.name = 'Tablet PC' ; 

item01.price = 1000 ; 

item01.origin = "China' } 

通过 变量 item01 衔接 点 运算 符 【.】， 可 动态 创建 变量 item01 的 Object 对 象 实例 的 3 个 新 属 
性 name、price 、origin 及 其 个 别 的 数据 'Table PC'、1000、'China'。 


item01['manufacture date'] = !2018/12/15' ; 

item01['color'] = "RoyalBlue' ; 

item01[''] = "secret data...' ; // empty property name 

通过 变量 item01 衔接 中 括号 运算 符 []， 亦 可 动态 创建 变量 item01 的 Object 对 象 实例 的 3 个 新 
属性 manufacture date、color、"， 以 及 其 个 别 的 数据 2018/12/15'、'RoyalBlue'、'secret data..…。 值 得 
注意 的 是 ， 和 衔接 点 运算 符 【.】 比 起 来 ， 衔 接 中 括号 运算 符 [] 的 方式 ， 可 创建 具有 如 下 特殊 名 称 的 
属性 : 

@ 带 有 空格 (space ) 字符 的 属性 名 称 ， 例 如 【manufacture date】 

ee 空 (empty ) 的 属性 名 称 ， 例 如 【"】 


console.log(item01) ; 
此 语句 使 得 网 页 浏览 器 在 调试 工具 【Console】 面 板 中 ， 显 示 出 如 下 信息 : 
{fname: “TabLet PE"，price: 1868, origin: "China”, manufacture date | 
"RoyalBLlue”", ~} 
"": "secret data...”" 
color: "Gold" 


manufacture date: "2818/12/15" 


name: “Tablet PC™" 
origin: "China”" 
: 906 


console.log(item01['']) ; 


空 属性 对 应 的 数据 "secret data.…"。 


console.log (item01.color) ; 


互 


item01["] 返 


item01.color 返回 属性 color 对 应 的 数据 "RoyalBlue"。 
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console.1log(item01 ['manufacture date']) ; 


item01['"manufacture date] 返 回 属 性 manufacture date 对 应 的 数据 "2018/12/15"。 


console.log(item01.price) ; 


item01.price 返回 属性 price 对 应 的 数值 1000。 

item01.price = 900 ; 

此 语句 使 得 变量 item01 的 属性 price， 重 新 被 赋予 整数 值 900。 
item01['"color'] = 'Gold' ; 
此 语句 使 得 变量 item01 的 属性 color， 重 新 被 赋予 字符 串 'Gold'。 
console.1og (item01) ; 


再 次 通过 此 语句 ， 查 看 变量 item01 的 数据 是 否 被 变更 了 。 


3.5 ”字符 串 类 型 


字符 串 〈string) 是 具有 一 串 字 符 〈character) 的 文本 数据 。 在 各 种 应 用 程序 的 画面 当中 ， 显 
示 给 用 户 观看 的 文本 ， 即 是 持续 由 多 个 字符 串 ， 拼 凑 而 成 的 产物 。 


[abn 

3.5.1 一 般 字符 串 

在 JavaScript 语言 中 ， 字 符 串 的 字面 量 (literal》 均 以 【内 含 一 串 字符 】 的 一 对 单 引号 或 双 引 
号 来 表示 。 关 于 一 般 字符 串 的 运用 ， 请 看 下 面 的 示例 。 

【3-5-1-common-strings.js】 

let sentence = 'Hi,\n\tlong time no see!\nhow are You today?\n\nBest Regards,\nAlex' ; 

console.log(sentence) ; 

sentence = "Limit '3' days and \"5\" persons."; 

console.log(sentence) ; 

sentence = '\\It costs \'370\' dollars.\\'; 

console.log (sentence) ; 

sentence = 'Alex lovingly loves ' + 

"lovely beloved of ' + 

'Daisy.' ; 

console.log(sentence) ; 


sentence = 'Alex lovingly loves \ 


76 


| Javascript 编 程 思想 : 从 ES5 到 ES9 


lovely beloved of \ 
Daisy.' ; 


console.log(sentence) ; 
console.log(sentence[0]) ; 
console.log(sentence[1]) ; 
console.log(sentence[2]) ; 
console.log(sentence[3]) ; 
console.log('') ; 


console.log (sentence.charAt (0)) ; 
console.log (sentence.charAt (1)) ; 
console.log(sentence.charAt (2)) ; 
console.log(sentence.charAt (3)) ; 


【相关 说 明 】 


let sentence = 'Hi,\n\tlong time no see!\nhow are you today?\n\nBest Regards,\nAlex' ; 


此 语句 声明 了 初始 数据 为 字符 串 的 变量 sentence。 在 此 字符 串 中 ， 存 在 多 个 换行 (new line) 


字符 \n'， 以 及 间隔 至 多 如 同 8 个 空格 的 制 表 (tab) 字符 \t'。 


console.log(sentence) ; 
此 语句 显示 出 变量 sentence 的 如 下 数据 字符 串 : 
Hi, 

long time no see! 


how are you today? 


Best Regards, 
Alex 


sentence = "Limit '3' days and \"5\" persons." ; 


此 语句 赋予 新 的 字符 串 字 面 量 ， 给 变量 sentence。 在 此 语句 中 ， 通 过 一 对 双 引 号 【""】， 容 纳 


字符 串 。 然 而 ， 在 此 双 引 号 之 内 ， 还 存在 其 他 单 引 号 与 双 引 号 。 


容纳 字符 串 的 一 对 双 引 号 【""】 或 单 引 号 【"】， 不 可 以 冲突 于 其 内 部 的 双 引 号 或 单 引 号 ! 其 


内 部 发 生 冲 突 的 引号 左 侧 ， 必 须 衔接 反 斜 枉 〈back slash) 字符 才 行 ， 例 如 : 


~ 


HR 


和 


console.log(sentence) ; 


此 语句 显示 出 变量 sentence 的 数据 字符 串 【Limit '3' days and "5" persons.】。 


sentence = '\\It costs \'370\' dollars.\\'; 


此 语句 将 新 的 字符 串 字 面 量 ， 赋 给 变量 sentence。 在 此 语句 中 ， 通 过 一 对 单 引号 【"】 容 纳 字 


和 。 然 而 ， 在 单 引号 之 内 ， 还 存在 反 斜 杠 和 其 他 单 引号 字符 。 
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在 字符 串 内 ， 单 引号 、 反 斜 杠 均 是 特殊 字符 ， 所 以 必须 在 其 左 侧 ， 衔 接 额 外 的 反 斜 杠 字符 ， 
成 为 【\】 或 【\】， 才 能 正常 呈现 在 信息 里 。 

console.1log (sentence) ; 
语句 显示 出 变量 sentence 的 数据 字符 串 【\It costs 370' dollars\】。 


sentence = 'Alex lovingly loves ' + 
"lovely beloved of ' + 
'Daisy.' ; 


此 语句 被 分 成 3 行 ， 在 等 号 右 侧 ， 借 助 加 法 运算 符 【+】， 进 行 3 个 字符 串 的 合并 运算 。 


console.log(sentence) ; 


此 语句 显示 出 多 个 字符 串 被 合并 之 后 的 新 字符 串 'Alex lovingly loves lovely beloved of Daisy.'。 


sentence = 'Alex lovingly loves \ 
lovely beloved of \ 
Daisy.' ; 


此 语句 亦 被 分 成 3 行 ， 在 等 号 右 侧 ， 借 助 反 斜 杠 字 符 ， 串 接 字 符 串 的 各 个 片段 。 

欲 使 用 此 法 ， 在 各 个 反 斜 杠 字 符 的 右 侧 ， 不 可 再 加 上 包括 空格 (space) 在 内 的 任何 字符 。 
console.log(sentence) ; 

此 语句 亦 显示 出 多 个 字符 串 被 合并 之 后 的 新 字符 串 'Alex lovingly loves lovely beloved of 
Daisy.'。 


console.log(sentence[0]) ; 
console.log(sentence[1]) ; 
console.log(sentence[2]) ; 
console.log(sentence[3]) ; 


变量 sentence 目前 的 数据 为 字符 串 'Alex lovingly loves lovely beloved of Daisy.'。 所 以 ， 将 变量 
sentence 的 数据 字符 串 ， 视 为 内 含 多 个 字符 的 数组 实例 时 ， 每 个 元 素 的 数据 ， 即 为 各 个 单一 字符 。 
这 4 个 语句 分 别 显 示 出 在 变量 sentence 的 数据 字符 串 里 , 其 第 1 个 至 第 4 个 元 素 的 数据 字符 'A'、 小 、 
'@' 与 x'。 


console.log (sentence.charAt (0)) ; 
console.log (sentence.charAt (1)) ; 
console.log (sentence.charAt (2)) ; 
console.log (sentence.charAt (3)) ; 


这 4 个 语句 较为 正统 ， 和 前 面 4 个 语句 有 异曲同工 之 妙 ， 亦 可 显示 出 在 变量 sentence 的 数据 
字符 串 里 ， 其 第 1 个 至 第 4 个 元 素 的 数据 字符 'A'、 路 、'e' 与 x'。 


3.5.2 ”格式 化 字符 串 (ES6) 


在 JavaScript 语言 中 ， 所 谓 的 格式 化 字符 串 (formatting string) 的 正式 名 称 为 模板 字面 量 
(template literal) ， 可 用 来 嵌入 待 评估 的 表达 式 。 当 这 些 表 达 式 被 评估 完成 而 返回 特定 数据 时 ， 格 
式 化 字符 串 才 能 被 确认 最 终 的 模样 。 关 于 格式 化 字符 串 的 运用 ， 可 参考 如 下 示例 。 
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【3-5-2-string-interpolations.js】 


【相关 说 明 】 
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{name: "Jessica'，age: '27', gender: 'female'}, 
{name: 'Daisy', age: '33', gender: 'female'}, 
{name: 'Sean', age: '24', gender: 'male'} 

js 


语句 声明 了 初始 数据 为 【内 含 4 个 对 象 实例 的 数组 实例 】 的 变量 users。 
var nations = ['China', 'Canada', 'America', "New Zeland'] ; 

语句 声明 了 初始 数据 为 【内 含 多 个 字符 串 的 数组 实例 】 的 变量 nations。 
var days_amount = 5 ; 

此 语句 声明 了 初始 数值 为 整数 5 的 变量 days_amount。 


var flight message = `${fusers[1] .name} decides to flight to ${nations[0]} after ${days amount} 
days。 了 


此 语句 声明 了 初始 数据 为 格式 化 字符 串 的 变量 flight_ message。 格 式 化 字符 串 必 须 放 入 一 对 反 
引号 (back quote)【`…】 中 。 在 格式 化 字符 串 里 ， 可 通过 ${ 变 量 名 称 } 或 ${ 可 评估 的 表达 式 } 的 语法 ， 
将 特定 变量 的 数据 或 者 表达 式 被 评估 之 后 的 数据 ， 放 置 于 格式 化 字符 串 里 。 
console.1og(flight_message) ; 
此 语句 显示 出 变量 flight_message 的 数据 ， 也 就 是 已 经 被 转换 完成 的 字符 串 'Jessica decides to 
flight to China after 5 days.'。 


flight message = “${users[3] .name} decides to flight to ${nations[2]} after ${days amount} 
days.、 ; 


此 语句 使 得 变量 flight_message， 被 赋予 男 一 个 格式 化 字符 串 。 

console.log(flight message) ; 

此 语句 显示 出 变量 flight_message 的 数据 ， 也 就 是 已 经 被 转换 完成 的 字符 串 'Sean decides to 
flight to America after 5 days.'。 


Var items = 
[ 
{product id: 15023, price: 330}, 
{product id: 16002, price: 500} 
] 


此 语句 声明 了 初始 数据 为 【内 含 对 象 实例 的 数组 实例 】 的 变量 items。 

var checkout message = ‘This product costs Stitems[1] .price * 0.8}.、 ; 

此 语句 声明 了 初始 数据 为 格式 化 字符 串 的 变量 checkout message。 

console.log (checkout_message) ; 

此 语句 显示 出 变量 checkout message 的 数据 ， 也 就 是 已 经 被 转换 完成 的 字符 串 'This product 
costs 400.'。 


Var string01 = 'Hello\nEarth!' ; 


此 语句 通过 单 引 号 【"】， 声 明了 初始 数据 为 一 般 字符 串 的 变量 string01。 


80 | Javascript 编程 思想 : 从 ES5 到 ES9 


var string02 = “Hello\nEarth!、 ; 

此 语句 通过 反 引 号 【`…】， 声 明了 初始 数据 为 格式 化 字符 串 的 变量 string02。 

var string03 = String.raw ‘Hello\nEarth!、 ; 

此 语句 通过 内 置 的 String 对 象 的 函数 raw0， 保 留 其 中 各 字符 的 原始 编码 ， 并 声明 了 初始 数据 
为 原始 (raw) 字符 串 的 变量 string03。 也 就 是 说 ,在 字符 串 里 的 【\n】， 已 经 被 视 为 一 般 的 字符 【\】 
与 【n】， 而 不 再 具有 换行 (new line) 的 特征 。 

值得 注意 的 是 ，raw0 明 明 是 一 个 函数 ， 在 此 却 不 能 衔接 一 对 小 括号 ， 而 是 衔接 一 对 反 引 号 ， 
以 实现 出 一 个 原始 字符 串 。 


console.1og(string01) ; 
console.log(string02) 7 


这 两 个 语句 显示 的 信息 相同 ， 具 体 如 下 : 
Hello 
Earth! 


console.log(string03) ; 


此 语句 显示 的 信息 是 【HellonEarth!】，【\n】 的 两 个 字符 【\】 与 【n) 均 被 保留 了 下 来 。 

number digits 一 "1234567' 

此 语句 声明 了 初始 数据 为 字符 串 的 变量 number_digits。 

A 其 庆 站 全 下 这 记 榴 全 你 玫 

ee & String.raw({raw: 'abcdefg'}, ... number digits) ; 

等 号 右 侧 的 String.raw0, 会 返回 交叉 分 组 之 后 的 字符 串 "al b2 c3 d4 e5 f6 g7", 在 此 ， 
如 下 语法 是 等 价 的 : 


® Stringraw({raw:'abcdefg',...number digits) 
® Stringraw({raw: ‘a be defg}, 12 .3d 5 6 7) 


console.log(string04) ; 


此 语句 显示 出 变量 string04 的 数据 , 也 就 是 被 交叉 分 组 之 后 的 字符 串 "al b2 c3 d4 e5 个 
87 "。 


3.5.3 “日 期 与 时 间 格 式 的 字符 串 (ES6) 


内 会 日 期 (date) 与 时 间 〈time) 相关 数据 的 字符 串 ， 可 被 称 为 日 期 与 时 间 格 式 的 字符 串 。 关 
于 日 期 与 时 间 格 式 的 字符 串 的 运用 ， 可 参考 如 下 示例 。 


【3-5-3-date-and-time-stringsjs】 


var dt cn = new Intl.DateTimeFormat('cn') ; 
Var dt en = new Intl.DateTimeFormat('en') ; 
var dt de = new Intl.DateTimeFormat('de') ; 
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origin datetime = new Date('2018-01-23') ; 


console.log(origin datetime.toDatestring()) ; 
console.log (origin datetime.toLocaleDatestring()) ; 


console.1log('') ; 


dt01 = dt cn.format (origin datetime) ; 
dt02 = dt en.format (origin datetime) ; 
dt03 = dt de.format (origin datetime) ; 


console.log(dt01) ; 
console.1log (dt02) ; 
console.log (dt03) ; 


【相关 说 明 】 


var dt_cn = new Intl.DateTimeFormat('cn') ; 


Intl.DateTimeFormat 对象 的 构造 函数 Intl.DateTimeFormat("cn"), 会 返回 中 文 / 中 国 Ccn, China) 
格式 的 Intl.DateTimeFormat 对 象 实例 。 后 续 源 代码 可 借助 变量 dt_cn 中 的 Intl.DateTimeFormat 对 象 
实例 ， 将 其 他 格式 的 日 期 与 时 间 ， 表 示 成 为 中 文 格式 的 日 期 与 时 间 。 


var dt_en = new Intl.DateTimeFormat('en') ; 


Intl.DateTimeFormat 对 象 的 构造 函数 Intl.DateTimeFormat("en") 会 返回 英文 (en, English) 格式 
的 Intl.DateTimeFormat 对 象 实例 。 后 续 源 代码 可 借助 变量 dt_en 中 的 Intl.DateTimeFormat 对 象 实例 ， 
将 其 他 格式 的 日 期 与 时 间 ， 表 和 示 成 为 英文 格式 的 日 期 与 时 间 。 


var dt de = new Int1.DateTimeFormat('de') ; 


Intl.DateTimeFormat 对 象 的 构造 函数 Intl.DateTimeFormat("de") 会 返回 德 文 / 德国 (de, DENIC 
eG for Germany ) 格式 的 Intl.DateTimeFormat 对 象 实例 。 后 续 源 代码 可 借助 变量 dt_de 中 的 
Intl.DateTimeFormat 对 象 实例 ， 将 其 他 格式 的 日 期 与 时 间 ， 表 示 成 为 德 文 格 式 的 日 期 与 时 间 。 

origin datetime = new Date('2018-01-23') ; 

此 语句 声明 了 变量 origin_datetime， 并 被 初始 化 为 【日 期 是 2018/01/23】 的 Date 对 象 实例 。 在 
此 ，Date('2018-01-23") 或 Date('2018/01/23') 均 可 被 解读 成 功 。 


console.log (origin datetime.toDateString()) ; 


origin_datetime.toDateString() 会 返回 字符 串 'Tue Jan 23 2018'。 


console.log (origin datetime.toLocaleDatestring()) ; 


origin_datetime.toLocaleDateString() 会 返回 字符 串 '2018/1/23'。 


dt01 = dt_cn.format (origin datetime) ; 


因为 变量 dt_cn 的 数据 是 Intl.DateTimeFormat 对 象 实例 ， 所 以 存在 可 调用 的 函数 format()。 
dt_cn.format(origin_datetime) 会 返回 【在 变量 origin_datetime 的 Date 对 象 实例 中 ， 其 内 含 的 日 期 与 
时 间 ， 被 表示 成 为 中 文 格式 】 之 后 的 字符 串 '2018/1/23'。 


82 | Javascript 编程 思想 : 从 ES5 到 ES9 


at02 = dt_en.format (origin datetime) ; 

因为 变量 dt_en 的 数据 是 Intl.DateTimeFormat 对 象 实例 ， 所 以 存在 可 调用 的 函数 format()。 
dt_en.format(origin_datetime) 会 返回 【在 变量 origin_datetime 的 Date 对 象 实例 中 ， 其 内 含 的 日 期 与 
时 间 ， 被 表示 成 为 英文 格式 】 之 后 的 字符 串 '1/23/2018'。 

at03 = dt _de.format (origin datetime) ; 

因为 变量 dt_de 的 数据 是 Intl.DateTimeFormat 对 象 的 实例 ， 所 以 存在 可 调用 的 函数 format()。 
dt_de.format(origin_datetime) 会 返回 【在 变量 origin_datetime 的 Date 对 象 实例 中 ， 其 内 含 的 日 期 与 
时 间 ， 被 表示 成 为 德 文 格 式 】 之 后 的 字符 串 23.1.2018'。 


3.6 ”集合 与 地 图 类 型 


对 JavaScript 语言 来 说 ,集合 (set) 与 地 图 (map) 主 要 可 用 来 简化 编程 的 负担 , 是 从 ECMAScript 
2015 (ES6) 版 本 开始 ， 才 具有 的 数据 类 型 。 


3.6.1 ”集合 类 型 (ES6) 


集合 (set) 内 含 其 数据 均 不 重复 的 元 素 ， 和 数学 理论 中 的 集合 ， 有 着 非常 相似 的 含义 与 原理 。 
换 句 话说 ， 在 特定 集合 内 ， 只 存在 其 数据 不 相同 的 元 素 。 关 于 集合 的 运用 ， 可 参考 如 下 示例 。 

【3-6-1-Set-data-type.js】 

let actions = new Set() ; 

actions.add('read') ; 


actions.add('write').add('update') ; 
actions.add('delete') ; 


actions.add('read') .add('read') .add('delete') .add('write') .add('update') ; 
console.log(actions) ; 


console.log(actions.entries()) ; 
console.log(actions.keys()) ; 
console.log(actions.values()) ; 
console.10g('') ; 


for (let element of actions) 


. 
console.log(element) ; 
} 


console.1og('') ; 
console.log (actions.size) ; 


console.log (actions.has('hide')) ; 
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console.log(actions.has('write")) ; 
【相关 说 明 】 

let actions = new Set() ; 

此 语句 声明 了 初始 数据 为 【 空 的 Set 对 象 实例 】 的 变量 actions。 

actions.add('read') ; 

当前 变量 actions 的 数据 为 一 个 Set 对 象 实例 ， 因 此 存在 可 调用 的 函数 add()。 在 变量 actions 
的 Set 对 象 实例 中 ， 添 加 数据 为 字符 串 read' 的 新 元 素 。 

actions .add('write').add('update') ; 

此 语句 使 得 在 变量 actions 的 Set 对 象 实例 中 ,连续 添加 数据 为 字符 串 'write' 与 update' 的 两 个 新 
元 素 。 

actions.add('delete') ; 

此 语句 使 得 在 变量 actions 的 Set 对 象 实例 中 ， 添 加 数据 为 字符 串 'delete' 的 新 元 素 。 

actions.add('read') .add('read') .add('delete') .add('write') .add('update') ; 

在 变量 actions 的 Set 对 象 实例 中 , 连续 添加 数据 为 字符 串 'read'、'read'、'delete'、'write' 与 'update' 
的 5 个 新 元 素 。 在 这 5 个 新 元 素 里 ， 存 在 重复 的 数据 字符 串 ， 所 以 ， 被 添加 至 变量 actions 的 Set 
对 象 实例 中 的 时 候 ， 重 复 的 元 素 会 自动 被 排除 在 外 。 

console.log(actions) ; 

此 语句 显示 出 变量 actions 的 Set 对 象 实例 【Set(4) {"read", "write", "update", "delete"} 】 的 信息 。 
在 此 ， 亦 可 看 出 在 这 个 Set 对 象 实例 中 ， 的 确 没 有 数据 相同 的 元 素 。 

console .log(actions .entries ()) ; 

console.1log(actions .keys()) ; 

console.log(actions.values()) ; 

这 3 个 语句 皆 显 示 出 相同 的 信息 【SetIterator {"read", "write", "update", "delete"} 】。 其 中 ，Set 
Iterator 具有 集合 迭代 器 的 含义 。 

for (let element of actions) 

{ 

console.1og (element) ; 

} 

通过 循环 语句 for… of 的 迭代 处 理 , 可 在 每 次 循环 中 , 显示 出 在 变量 actions 的 Set 对 象 实例 中 ， 
其 特定 元 素 的 如 下 数据 字符 号 


二 


@ read 

® Write 
® update 
® delete 


console.log (actions.size) ; 
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actions.size 会 返回 Set 对 象 实例 中 的 元 素 个 数 4。 
console.log(actions.has('hide')) ; 

actions.has('hide') 会 返回 false， 意 味 着 在 Set 对 象 实例 中 ， 并 无 数据 字符 串 为 'hide' 的 元 素 。 
console.1l0g (actions.has('write')) ; 


actions.has("write') 会 返回 true， 代 表 着 在 Set 对 象 实例 中 ， 存 在 数据 字符 串 为 "write' 的 元 素 。 


3.6.2 ”地 图 类 型 (ES6) 


地 图 (map) 内 含 【 键 名 (key name) 对 应 到 值 (value) / 数据 (data》】 的 组 合 。 地 图 与 对 
象 (object) 极为 相似 ， 只 是 节省 了 对 象 的 累 效 和 限制 。 关 于 地 图 的 运用 ， 可 参考 如 下 示例 。 

【3-6-2-Map-data-type.js】 

let items = new Map() ; 

items.set('slipper', 50) ; 


items.set('shoes', 200) ; 
items.set('pants', 100).set('shirt', 150) ; 


console.log(items) ; 
console.log(items.size) ; 


console.log(items.entries()) ; 
console.log(items.keys()) ; 
console.log(items.values()) ; 


for (let [product, price] of items) 
{ 

console.log (‘One ${product} costs ${price}.*) ; 
} 


【相关 说 明 】 

let items = new Map() ; 

此 语句 声明 了 初始 数据 为 【 空 的 Map 对 象 实例 】 的 变量 items。 

items .set('slipper'，50) ; 

变量 items 的 数据 ， 当 前 为 一 个 Map 对 象 实例 ， 因 此 存在 可 调用 的 函数 set()。 此 语句 使 得 在 
变量 items 的 Map 对 象 实例 中 ， 被 添加 键 名 为 slipper、 值 为 50 的 新 元 素 。 

items .set('shoes'，200) ; 

此 语句 使 得 在 变量 items 的 Map 对 象 实例 中 ， 被 添加 键 名 为 shoes、 值 为 200 的 新 元 素 。 

items.set('pants', 100).set('shirt', 150) ; 

此 语句 使 得 在 变量 items 的 Map 对 象 实例 中 , 连续 添加 键 名 分 别 为 pants 与 shirt、 值 分 别 为 100 
与 150 的 两 个 新 元 素 。 
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console.log (items) ; 


此 语句 显示 出 在 变量 items 的 Map 对象 实 例 [Map(4) {"'slipper" => 50, "shoes" => 200, "pants" => 


100, "shirt" => 150} 】 的 信息 。 


console.log(items.size) ; 
items.size 会 返回 Map 对 象 实例 中 的 元 素 个 数 4。 


console.log (items.entries()) ; 


此 语句 显示 出 MapIterator {"slipper" => 50, "shoes" => 200, "pants" => 100, "shirt" => 150} 的 信 


息 。 其 中 ，Map Iterator 具有 地 图 迭代 器 的 含义 。 


中 


console.10g (items.keys()) ; 

此 语句 显示 出 MapIterator {"slipper", "shoes", "pants", "shirt"} 的 信息 。 
console.10g (items.values()) ; 

显示 出 MapIterator {50, 200, 100, 150} 的 信息 。 


for (let [product, price] of items) 
{ 

console.log(‘One ${product} costs ${price}.*) 
} 


通过 此 循环 语句 for … of 的 迭代 处 理 ， 可 在 每 次 循环 中 ， 显 示 出 在 变量 items 的 Set 对 象 实例 
特定 元 素 的 如 下 数据 字符 串 : 

One slipper costs 50. 

One shoes costs 200. 

One pants costs 100. 

One shirt costs 150. 


值得 注意 的 是 ， 在 上 述 循环 语句 的 小 括号 里 ，【let [product, price] of items】 的 语句 ， 使 得 在 


每 次 循环 中 : 


ee 变量 product 的 数据 ， 成 为 在 变量 items 的 Map 对 象 实例 中 ， 特 定 元 素 的 键 名 ， 例 如 slipper。 
变量 price 的 数据 ， 成 为 在 变量 items 的 Map 对 象 实例 中 ， 特 定 元 素 的 值 ， 例 如 50。 


3.7 ”数据 类 型 的 转换 (ES6 ) 


对 于 各 编程 语言 来 说 ， 特 定 变 量 在 不 同 的 时 间 点 上 ， 可 被 赋予 不 同类 型 的 数据 ! 在 JavaScript 


引擎 中 ,通过 自动 转换 机 制 或 者 一 些 内 置 函数 ， 可 使 得 特定 变量 的 数据 ， 从 原来 的 数据 类 型 ， 转 换 
成 为 新 的 数据 类 型 。 


最 常见 的 数据 类 型 的 转换 ， 英 过 于 【其 他 数据 一 字符 串 】 和 【字符 串 一 数值 】。 关 于 数据 类 


型 的 转换 的 综合 运用 ， 可 参考 如 下 示例 。 
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【3-7---data-type-conversions.js】 
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console.log (result) ; 

【相关 说 明 】 

let digital string = ， 123 '; 

此 语句 声明 了 初始 数据 为 字符 串 ' 123 ' 的 变量 digital_string。 

result = Number(digital string) ; 

通过 内 置 的 Number 对 象 的 构造 函数 Number()， 将 变量 digital_string 的 数据 字符 串 ' ”123' ， 
转换 成 十 进 制 整数 值 123 。 在 转换 过 程 中 ， 所 有 空格 〈space) 字符 皆 会 被 过 滤 掉 。 

digital_string = ' 00123' ; 

将 字符 串 ' 0o123'， 赋 给 变量 digital_string。 

result = Number(digital string) ; 

通过 内 置 的 Number 对 象 的 构造 函数 Number()， 将 变量 digital_string 的 数据 字符 串 ' ”00123'， 
先 视 为 成 八进制 整数 码 123， 再 转换 成 为 等 价 的 十 进 制 整数 值 83。 

aigital_string = '0x123 '; 

将 字符 串 '0x123 “' 赋 给 变量 digital_string。 

result = Number(digital string) ; 

通过 内 置 的 Number 对 象 的 构造 函数 Number()， 将 变量 digital_string 的 数据 字符 串 '0x123 ，， 
先 视 为 十 六 进 制 整 数码 123， 再 转换 成 为 等 价 的 十 进 制 整数 值 291。 


result = parseInt (digital string) ? 
result = Math.round (digital string) ; 


这 两 个 语句 皆 可 达成 【将 字符 串 '0x123 '， 转 换 成 为 等 价 的 十 进 制 整数 值 291】 的 任务 。 


digital string = '35.62' ; 
result = Math.floor (digital string) ; 


这 两 个 语句 将 字符 串 '35.62'， 转 换 成 为 十 进 制 整数 值 35。 


digital string = '28.2' ; 
result = Math.ceil (digital string) ; 


这 两 个 语句 将 字符 串 '28.2'， 转 换 成 为 十 进 制 整数 值 29。 


digital string = '12.5' ; 
result = Math.round(digital string) ; 


这 两 个 语句 将 字符 串 '12.5'， 转 换 成 为 十 进 制 整数 值 13。 
let value = 53.8125 ; 


此 语句 声明 了 初始 数值 为 53.8125 的 变量 value。 


result = value.toString(2) ; 


value.toString(2) 会 返回 转换 之 后 的 二 进 制 数码 110101.1101 。 
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result = value.toString(8) ; 
valuetoString(8) 会 返回 转换 后 的 八进制 数码 65.64。 


result = value.toString(16) ; 


Value.toString(16) 会 返回 转换 后 的 十 六 进 制 数码 35.d。 


3.8 练 习 题 


1. 在 JavaScript 语言 里 ， 应 该 使 用 什么 语句 ， 才 能 将 浮 点 数 25.75， 分 别 表示 成 为 二 进 制 、 八 


进 制 和 十 六 进 制 数码 的 字符 串 ? 


2. 在 JavaScript 语言 里 ， 应 该 使 用 什么 语句 ， 才 能 将 二 进 制 数码 110111011， 直 接 转 换 成 为 十 


六 进 制 数码 ? 


3. 在 JavaScript 语言 里 ， 应 该 使 用 什么 语句 ， 才 能 直接 将 二 进 制 数码 101100011100、 八 进 制 


数码 1275、 十 六 进 制 数码 51cf 的 总 和 ， 转 换 成 二 进 制 数码 ? 


式 。 


4. 已 知 变量 x 与 y， 请 将 32 + 2(x- 1D27 + 202 + 5， 编写 成 为 JavaScript 语言 中 的 算术 表达 


5. 已 知 有 如 下 主要 表达 式 : 

let product = {item01: ['fruit set', 100], item02: ['sticker set', 250], item03: ['magnet set', 
350], item04: ['drink set', 150], item05: ['pizza set', 300]}; 

请 编写 【将 上 述 各 个 整数 值 的 总 和 ， 赋 给 变量 result】 的 语句 。 

6. 说 明 原 始 常量 NaN、Infinity 和 undefined 的 含义 。 

7. 执行 如 下 JavaScript 源 代 码 片段 之 后 ， 变 量 result 的 结果 值 是 什么 ? 


let num01 = 28.56, num02 = 32.47 ; 
let result ; 


result = parseInt (num01) + Math.trunc(num01) + Math.floor(num01) + Math.round(num01) + 
Math.ceil (num01) ; 


result += parseInt (num02) + Math.trunc (num02) + Math.floor (num02) + Math.round (num02) + 
Math.ceil (num02) ; 


8. 请 编写 JavaScript 源 代码 ,使 得 变量 price 的 数值 72583000， 显 示 成 为 货币 数值 格式 的 字符 


串 ' CNY¥72,583,000.00'。 


9. 列举 两 种 JavaSeript 语法 ， 来 计算 并 显示 【3x , where x = 768 】 的 数值 。 
10. 列举 两 个 等 价 于 【price >= 300 && amount < 10】 的 比较 与 逻辑 表达 式 。 

11. 已 知 如 下 数组 实例 : 

let arr = [[[5, 10], [15, 20]], [[25, 30], [35, 40]], [[45, 50], [55, 60]]] ; 
访问 上 述 整 数值 25、40 和 60 的 语法 是 什么 ? 

12. 已 知 如 下 对 象 实例 : 
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let obj = {product: {en: 'browser'，cn: ' 浏 览 器 ' }, developer: {en: 'Google'，cn: ' 谷 歌 '}, price: 
{en: 'free'，cn: ' 免 费 '}} ，; 


访问 字符 串 'browser'"、' 谷 歌 ' 与 'free' 的 语法 是 什么 ? 

13. 已 知 数据 为 对 象 实例 的 变量 profile 和 如 下 主要 表达 式 : 

let message = profile.name + ' now lives on ' + profile.planet + 1.'; 
让 变量 message 被 设置 为 相同 数据 字符 串 的 等 价 语法 是 什么 ? 

14. 欲 显示 如 下 分 行 的 信息 : 


Apple: 11 
Banana: 15 


Guava: 23 
其 较为 简短 的 JavaScript 语法 应 该 是 什么 ? 

15. 欲 显示 当前 的 日 期 与 时 间 ， 其 较为 简短 的 JavaScript 语法 应 该 是 什么 ? 
16. 欲 声明 其 数据 为 如 下 集合 实例 的 变量 components: 


Set(5) {"window", "pane", "dialogue", "button", "scrollbar"} 


:较为 简短 的 JavaScript 语法 应 该 是 什么 ? 
17. 欲 声明 其 数据 为 如 下 地 图 实例 的 变量 devices: 
Map(4) {"mobile phone" => 10, "tablet PC" => 7, "notebook PC" => 3, "desktop PC" => 20} 


.较为 简短 的 JavaScript 源 代码 应 该 是 什么 ? 
18. 已 知 变量 num 的 数值 为 十 进 制 整数 值 201314, 请 编写 【 带 有 置 入 变量 名 称 的 模板 字面 量 ， 
F 且 显示 如 下 信息 】 的 JavaScript 源 代码 : 
变量 num 的 : 
十 进 制 数值 = 201314 
二 进 制 数码 = 110001001001100010 


八进制 数码 = 611142 
十 六 进 制 数码 = 31262 


第 4 章 


条 件 和 循环 语句 


要 介绍 让 和 switch 两 种 条 件 语句 , 以 及 for 和 while 两 类 循环 语句 , 并 且 进 一 步 介绍 for … 
of 语句 和 迭代 器 的 协作 应 用 ， 以 及 break 与 continue 语句 的 运用 时 机 。 


4.1 条 件 语句 


条 件 语句 (conditional statement) 可 依据 不 同 的 条 件 ， 决 定 并 执行 相对 应 的 任务 。 在 JavaScript 
语言 里 ， 条 件 语 句 大 致 可 分 为 让 和 switch 语句 。 


4.1.1 j 疼 语句 

JavaScript 语言 的 让 语句 ， 和 Java、C、C++、C#、PHP、R 语言 等 的 让 语 句 是 相同 的 ， 并 且 
可 分 为 如 下 几 种 语法 格式 : 

(1) 


本 


在 同一 组 让 语句 中 ，else 让 子 语句 可 以 超过 1 个 ， 但 是 else 子 语句 最 多 只 能 有 1 个 。 关 于 让 
语句 的 综合 运用 ， 可 参考 如 下 示例 。 


【4-1-1-if-statementsjs】 
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【相关 说 明 】 


此 语句 声明 了 初始 数据 为 【内 含 字符 串 的 数组 实例 】 的 变量 positives。 


此 语句 声明 了 变量 user_input。 


此 语句 将 字符 串 'YEA' 赋 给 变量 user_input。 


因为 变量 user_input 的 数据 当前 为 字符 串 ， 所 以 存在 函数 toLowerCase() 可 被 调用 ， 以 转换 成 
为 全 部 小 写字 母 (lower-case letter) 的 字符 串 'yea'。 


若 表达 式 【positives.indexOftuser_inpub != -1】 为 真 ， 则 代表 【positives.indexOfluser_input)】 
的 返回 值 并 不 是 -1。 这 也 就 意味 着 ， 变 量 user_input 的 数据 字符 串 'yea'， 的 确 存 在 于 变量 positives 
的 数组 实例 中 。 

一 旦 让 条 件 语句 的 小 括号 里 的 表达 式 为 真 ， 其 大 括号 里 的 源 代码 就 会 被 执行 。 


此 语句 重新 赋予 字符 串 'N'， 给 变量 user_ input。 
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此 语句 再 次 调用 user inputtoLowerCase0， 以 转换 成 为 小 写字 母 〈lower-case letter) 的 字符 串 


o 


【positives.indexOfluser_input)】 的 返回 值 并 不 是 -1， 这 也 就 意味 着 变量 user_input 的 字符 串 'm' 
存在 于 变量 positives 的 数组 当中 。 一 旦 直 条 件 语 句 的 小 括号 里 的 表达 式 为 真 ， 关 键 字 if 下 方 、else 
上 方 的 大 括号 里 的 源 代 码 ， 就 会 被 执行 ， 若 为 假 ， 则 关键 字 else 下 方 大 括 号 里 的 源 代码 ， 才 会 被 
执行 。 


此 语句 声明 了 变量 score， 以 及 初始 数据 为 空 字符 串 的 变量 message。 


此 语句 将 整数 值 30 赋 给 变量 score。 


若 变量 score 的 数值 大 于 90， 则 执行 关键 字 认 正 下 方 大 括 号 里 的 源 代码 。 


若 变量 score 的 数值 小 于 或 等 于 90， 并 且 大 于 80， 则 执行 此 段 else f 大 括号 里 的 源 代码 。 


若 变量 score 的 数值 小 于 或 等 于 80， 并 且 大 于 70， 则 执行 此 段 else if 大 括号 里 的 源 代码 。 


若 变 量 score 的 数值 小 于 或 等 于 70， 并 且 大 于 60， 则 执行 此 段 else f 大 括号 里 的 源 代码 。 
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若 变量 score 的 数值 小 于 或 等 于 60， 并 且 大 于 40， 则 执行 此 段 else 让 大 括号 里 的 源 代码 。 


若 变量 score 的 数值 小 于 或 等 于 40， 则 执行 else 正 下 方 大 括 号 里 的 源 代 码 。 


通过 此 语句 所 显示 的 信息 ， 即 可 得 知 究竟 是 哪 一 对 大 括号 里 的 源 代 码 被 执行 了 。 


4.1.2 ”switch 语句 


JavaScript 语言 的 switch 语句 ， 和 Java、C、C++、C#、PHP 语言 等 的 switch 语句 ， 有 着 相同 
的 语法 格式 。switch 语句 主要 依据 【相同 】 数 据 或 【相等 】 数 值 的 比较 条 件 ， 决 定 并 执行 相对 应 的 
源 代码 片段 。 在 需要 比较 【大 于 】 或 【小 于 】 的 场合 里 ， 运 用 让 语句 会 更 为 适合 。 

switch 语句 的 语法 格式 如 下 : 


其 中 ，case 子 语句 可 以 有 多 个 ， 但 是 default 子 语句 只 能 有 1 个 。 关 于 switch 语句 的 运用 ， 可 
参考 如 下 示例 。 


【4-1-2-switch-statements.js】 


【相关 说 明 】 


此 语句 声明 了 变量 digital_word 与 message。 


此 语句 将 2091.8 赋 给 变量 digital_word。 


通过 switch 语句 ， 可 根据 变量 digital_word 的 不 同 数据 ， 执 行 大 括号 中 特定 case 子 语句 里 的 
源 代码 片段 。 


若 digital_word 的 数值 等 于 530， 则 执行 【case 530:】 之 后 ， 至 最 接近 的 【break ;】 为 止 的 源 代 
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break ; 


若 digital_word 的 数值 等 于 201314， 则 执行 【case 201314: 】 之 后 ， 至 最 接近 的 【break ;】 为 止 
的 源 代码 片段 。 
case 2013: 
message = ' 爱 你 一 生 ' ; 
break ; 
若 digital_word 的 数值 等 于 2013， 则 执行 【case 2013:】 之 后 ， 至 最 接近 的 【break ;】 为 止 的 源 
代码 片段 。 
case 2014: 
message = ' 爱 你 一 世 ' ， 
break ; 
若 digital_word 的 数值 等 于 2014， 则 执行 【case 2014:】 之 后 ， 至 最 接近 的 【break ;】 为 止 的 源 
代码 片段 。 
case 2091.8: 
message = ' 爱 你 久 一 点 吧 ! ， ， 
break ; 
若 digital_word 的 数值 等 于 2091.8， 则 执行 【case 2091.8:】 之 后 至 最 接近 的 【break ;】 为 止 的 
源 代码 片段 。 
default: 
message = '+= =' } 
// break ; 
车 digital_word 不 是 以 上 数值 ， 则 执行 【default:】 之 后 ， 至 最 接近 的 【break ;】 或 者 switch 语 
句 末尾 为 止 的 源 代码 片段 。 其 中 ，default 子 语句 被 放 在 switch 语句 的 末尾 ， 所 以 【break ;】 是 可 被 
省 略 的 。 
} 


console.log (message) ; 


通过 此 语句 所 显示 的 信息 ， 即 可 得 知 究竟 是 哪 一 个 case 子 语句 被 执行 了 。 
4.2 循环 语句 


循环 语句 〈loop statement) 可 用 来 描述 重复 执行 特定 源 代码 片段 的 动作 。JavaScript 语言 支持 
的 循环 语句 ， 主 要 为 for 相关 语句 和 while 相关 语句 。 


4.2.1 for 相关 语句 〈ES6 ) 


JavaScript 语言 的 for 相关 语句 ， 可 细 分 如 下 : 


在 for 语句 中 ， 关 键 字 of 或 in 的 存在 与 否 ， 会 影响 其 迭代 方式 : 
@ ”没有 关键 字 of 和 in， 仅 依据 特定 变量 的 数据 是 否 符合 特定 条 件 ， 而 被 进行 迭代 任务 。 
日 存在 关键 字 of， 必 须根 据 特定 变量 的 数组 实例 中 的 元 素 个 数 ， 而 被 进行 迭代 任务 。 
e 存在 关键 字 in， 必 须根 据 特定 变量 的 对 象 实例 中 的 属性 个 数 ， 而 被 进行 迭代 任务 。 
关于 for 语句 的 综合 运用 ， 可 参考 如 下 示例 。 

【4-2-1-e1-for-loopsjs】 
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message = "1 


for (let str in product) 
{ 

message += “${str} “~; 
} 


console.log (message) ; 


【相关 说 明 】 

let fruits= ['apple', 'blueberry', 'cherry', 'durian', 'Fig', 'Grape', 'Haw', 'Kiwi', 'Lichee', 
'Mango', 'Nucleus', 'Orange', 'Pear', 'Raspberry', 'Strawberry', 'Tangerine', 
"Watermelon'] ; 

此 语句 声明 了 初始 数据 为 内 含 字 符 串 元 素 的 数组 实例 的 变量 fruits。 

let message = ''; 

此 语句 声明 了 初始 数据 为 空 字符 串 的 变量 message。 


for (let i = 1; i < fruits.length + 1; i++) 
{ 

message += ` (${i}) ${fruits[i - 1]} *，; 
} 


因为 fruits.length 的 返回 值 为 整数 值 17， 代 表 变 量 fruits 的 数组 实例 中 的 元 素 个 数 为 17， 所 以 
for 循环 语句 会 迭代 17 次 , 每 次 将 【( 编 号 ) 水 果 名 称 】 模 式 的 子 字符 串 ， 衔 接 到 变量 message 的 数 
据 字 符 串 里 。 待 此 循环 语句 的 迭代 结束 时 ， 变 量 message 的 数据 ， 会 演变 成 为 如 下 字符 串 : 


® '(1) apple (2)blueberry (3)cherry (4) durian (5) Fig (6) Grape (7) Haw (8) Kiwi (9) 
Lichee (10) Mango (11) Nucleus (12) Orange (13) Pear (14) Raspberry (15) Strawberry 
(16) Tangerine (17) Watermelon '。 


console.log (message) ; 
console.10g('') ; 


message = ''; 
此 语句 清空 了 变量 message 中 的 字符 串 。 


for (let value of fruits) 
{ 

message += '${value} '; 
} 


此 语句 是 用 来 简化 数组 实例 的 各 元 素 的 访问 语法 。 通 过 在 关键 字 of 的 左 侧 ， 声 明 块 范围 的 变 
量 value， 并 在 其 右 侧 ， 放 入 其 数据 为 数组 实例 的 变量 fruits; 此 语句 因此 按照 迭代 的 顺序 ， 将 变量 
fruits 的 数组 实例 中 特定 元 素 的 数据 ， 赋 给 变量 value。 待 此 循环 语句 的 迭代 结束 时 ， 变 量 message 
的 数据 会 演变 成 为 如 下 字符 串 : 


® apple blueberry cherry durian Fig Grape Haw Kiwi Lichee Mango Nucleus 
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Orange Pear Raspberry Strawberry Tangerine Watermelon 


console.log (message) ; 
console.10og('') ; 


let product = {id: 5685, name: 'Tablet PC', color: 'Gold', Price: '1200', OS: 'Android'} ; 


此 语句 声明 了 初始 数据 为 对 象 实例 {fid: 5685, name: 'Tablet PC', color: 'Gold', Price: '1200', OS: 
'Android'} 的 变量 product。 


message = 

此 语句 用 来 清空 变量 message 中 的 字符 串 。 

for (let str in product) 

{ 

message += “${str} ~ ; 

} 

此 语法 是 是 用 来 简化 对 象 实例 的 各 属性 的 访问 语法 。 通 过 在 关键 字 in 的 左 侧 ， 声 明 块 范围 的 
变量 str， 并 在 其 右 侧 ， 放 入 数据 为 对 象 实例 的 变量 product;， 此 语句 因此 按照 欠 代 的 顺序 ， 将 变量 
product 的 对 象 实例 中 特定 属性 的 名 称 ， 赋 给 变量 str。 待 此 循环 语句 的 迭代 结束 时 ， 变 量 message 
的 数据 会 演变 成 为 如 下 字符 串 : 


® id name color Price OS 


for … of 语句 必须 配合 可 迭代 〈iterable) 的 对 象 实例 ， 才 可 和 迭代 其 各 个 属性 。 关 于 for … of 语 
名 和 迭代 器 的 运用 ， 参 看 如 下 示例 。 


【4-2-1-e2-for-of-loops-and-iterators.js】 

let a01 = [520，530，1314，2013，2014，2591.8] ; 
let sum = 0 

for (let num of a01) 

{ 


sum += num ; 


console.1og(`current number = ${num}*) ; 


} 
console.1og('') ; 
let greetings = 'Hello, world, Solar System, Galaxy.' ; 
for (let c of greetings) 
{ 
console.log(c) ; 
} 


console.1log('') ; 


function display(... args) 
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【相关 说 明 】 


此 语句 声明 了 初始 数据 为 数组 实例 的 变量 a01。 


此 语句 声明 了 初始 数值 为 0 的 变量 sum。 


for ...of 循环 语句 需要 一 个 可 作为 迭代 器 (iterator) 的 变量 。 其 数据 为 数组 实例 的 变量 a01， 
就 具有 迭代 器 的 特征 。 变 量 a01 的 数组 实例 中 的 元 素 个 数 为 6， 所 以 此 循环 语句 会 迭代 6 次 ， 使 得 
其 大 括号 里 的 源 代码 片段 ， 会 被 执行 6 次 。 每 次 迭代 而 执行 的 动作 是 : 

e@ 让 变量 num 按照 迭代 的 顺序 ， 被 赋予 变量 a01 的 数组 实例 中 特定 元 素 的 数值 。 

@ 让 变量 sum 的 数值 ， 加 上 变量 num 的 数值 。 

e@ ”显示 变量 num 当前 的 数值 。 


此 语句 声明 了 初始 数据 为 字符 串 'Hello, world, Solar System, Galaxy.' 的 变量 greetings。 
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} 


其 数据 为 字符 串 的 变量 greetings， 亦 具有 和 友 代 器 的 特征 。 变 量 greetings 的 字符 串 里 的 字符 个 
数 为 35， 所 以 此 循环 语句 会 迭代 35 次 。 每 次 迭代 而 执行 的 动作 是 : 

@ 让 变量 c 按 照 迁 代 的 顺序 ， 被 赋予 变量 greetings 的 数据 字符 串 里 的 特定 字符 。 

@ ”显示 变量 c 当 前 的 数据 字符 。 


console.1log(' 7) 
function display(... args) 


通过 【.…args】 的 语法 ， 定 义 此 函数 的 参数 列 ， 使 得 被 传 入 的 各 个 参数 ， 被 压缩 成 为 参数 变量 
args 的 数组 实例 中 的 各 个 元 素 。 举 例 来 说 ， 在 函数 display('what, 'when', 'where', 'which', 'who') 被 调 
用 的 情况 下 ， 参 数 变量 args 的 数据 ， 即 是 数组 实例 ["what, 'when', 'where', 'which', 'who']。 
{ 
for (let arg of args) 
{ 


console.1log(arg) ; 
} 


在 for...of 循环 语句 的 每 次 迭代 中 ， 局 部 变量 arg 的 数据 ， 会 成 为 参数 变量 args 的 数组 实例 中 
特定 字符 串 元 素 。 此 循环 语句 会 逐一 显示 如 下 信息 : 
® What 
when 
where 
which 
who 


console.10g('') ; 


for (let arg of arguments) 
{ 
console.log(arg) ; 


} 
此 循环 语句 和 上 一 段 的 循环 语句 ， 具 有 相同 的 效果 。 值 得 注意 的 是 ，JavaScript 引擎 支持 内 置 
的 参数 变量 arguments， 并 且 和 前 述 变量 args 有 相同 的 数据 。 
} 


display ('what', 'when', 'where', ‘which', 'who') ; 
此 语句 调用 了 被 传 入 多 个 数据 的 函数 display('what', 'when', 'where', 'which', 'who')。 
function * gen01() 


此 语句 用 来 定义 新 的 生成 器 函数 〈generator function〉， 必 须 在 关键 字 function 与 函数 名 称 之 间 ， 放 


置 星 号 【*】。 
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let top value = parseInt(30 * Math.random()) ; 


此 语句 将 parseInt(30 * Math.random()) 返 回 的 0~29 的 随机 整数 值 ， 赋 给 变量 top_value。 每 当 
此 语句 重新 被 执行 时 ， 变 量 top_value 的 数值 ， 都 会 随机 变化 。 
for (let i = 1; i < top value; i += 3) 
{ 
yield i ; 
} 

在 此 for 语 句 的 每 次 迭代 中 ， 其 大 括号 里 的 【yield i;】 会 被 执行 ， 使 得 变量 i 当前 的 数值 ， 动 
态 被 产生 (yield) 至 最 终 会 被 返回 的 迭代 器 实例 中 。 另 外 ， 此 示例 源 代码 每 次 被 重新 执行 时 ， 都 会 
使 得 上 述 的 迭代 器 实例 ， 具 有 不 定 个 数 的 元 素 。 在 上 述 的 迭代 器 实例 中 ， 各 个 元 素 的 数值 沸 小 于 
30， 而 且 相 邻 元 素 的 数值 的 差距 均 为 3， 例 如 【1471013】 或 【1471013161922】 等 。 

} 


let gen02 = 
{ 
* [Symbol.iterator] () 
let top value = parseInt (30 * Math.random()) ; 


for (let i1 = 1; i < top valuvue; 1 += 3) 
yield i ; 
} 
} 
和 


此 表达 式 可 用 来 定义 具有 生成 器 (generator) 特征 的 变量 。 因 为 其 语法 较为 复杂 ， 建 议 读 者 可 
以 简单 理解 成 为 【let 变量 名 称 = {* [Symbol.iterator]0 { .… } 3 的 语法 格式 。 实 际 上 ,变量 gen02 
与 函数 gen010) 的 功能 是 相同 的 。 


for (let num of gen01()) 
{ 
console.1log (num) ; 


} 
在 关键 字 of 的 右 侧 ， 有 生成 器 函数 gen01()， 会 返回 可 作为 迭 代 器 的 新 实例 。 


console.10g('') 


for (let num of gen02) 
{ 

console.1og (num) ; 
} 


在 关键 字 of 右 侧 ， 有 生成 器 变量 gen02， 亦 会 返回 可 作为 迭代 器 的 新 实例 。 
let number array = [... gen01()] ; 


车 gen010 返 回 的 迭代 器 实例 为 <1, 4, 7, 10, 13>， 则 [... gen010] 等 价 于 [... <1, 4, 7, 10, 13>]， 并 
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且 可 被 化 简 成 为 [1, 4, 7, 10, 13]。 简 单 来 看 ， 扩 展 运算 符 【...】 具 有 解 开 迭代 器 实例 的 用 途 。 
console.log (number array) ; 
此 语句 显示 [1, 4, 7, 10, 13] 等 类 似 的 信息 。 


console.10g('') 


class Planets 


关键 字 class 在 此 用 来 定义 名 称 为 Planets 的 类 。 
{ 

* solar system() 

{ 


let planet list = [' 水 星 (Mercury)'，' 金 星 (Venus)'，' 地 球 (Earth)' ，' 火 星 (Mars)'，' 木 星 
(Jupiter)'，' 土 星 (Saturn) '，' 天 王 星 (Uranus)'，' 海 王 星 (Neptune) ' ， ' 冥 王 星 (Pluto)'] ; 


for (let planet of planet list) 
{ 
yield Planet ; 
} 
} 


定义 生成 器 函数 solar_system0， 会 动态 生成 【内 含 太阳 系 九 大 行星 的 中 英文 名 称 字符 串 】 的 
迭代 器 实例 。 

} 

p01 = new Planets() ; 

此 语句 声明 初始 数据 为 Planets 类 实例 的 变量 p01。 


let a copy = [... pO0l.solar system()] ; 


在 此 ，p01.solar_system() 会 返回 迭代 器 实例 <" 水 星 (Mercury)", "金星 (Venus)", "地 球 (Earth)"， 
"火星 (Mars)", "木星 (JupiteD", "土星 (Saturm)", "天王 星 (Uranus)", "海王 星 (Neptune)", " 竖 王 星 
(Pluto)">。 
因为 ，[... p01.solar_system()] 等 价 于 [... <" 水 星 (Mercury)", "金星 (Venus)", "地 球 (Earth)", " 火 
星 (Mars)", "木星 (Jupiter)", "土星 (Saturn)", "天王星 (Uranus)", "海王 星 (Neptune)"，" 冥 王 星 
(Pluto)">], 并 可 进一步 化 简 成 为 [" 水 星 (Mercury)", "金星 (Venus)", "地 球 (Earth)", "火星 (Mars)"," 
木星 (Jupiten)", "土星 (Saturn)", "天 王 星 (Uranus)", "海王 星 (Neptune)", "冥王 星 (Pluto)"]。 

所 以 ， 变 量 a_copy 的 初始 数据 即 为 [" 水 星 (Mercury)", "金星 (Venus)", "地 球 (Earth)", "火星 
(Mars)"，" 木 星 (Jupiter)", "土星 (Saturm)"，" 天 王 星 (Uranus)", "海王 星 (Neptune)", "冥王 星 
(Pluto)"]。 


4.2.2 ”while 相关 语句 


JavaScript 语言 的 while 相关 语句 ， 有 如 下 两 种 。 
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(2) 


其 中 ，do ... while 语句 至 少 会 迭代 1 次 ， 这 是 因为 【判断 是 否 继续 和 欠 代 】 的 比较 表达 式 ， 位 于 
整个 语句 末尾 的 小 括号 里 ， 使 得 判断 的 动作 ， 是 在 每 次 迭代 完成 之 后 。 这 也 就 意味 着 , 无论 比较 表 
达 式 是 否 为 真 ， 办 代 的 动作 至 少 会 进行 1 次 。 关 于 while 语句 的 综合 运用 ， 可 参考 如 下 示例 。 


【4-2-2-while-loops.js】 


【相关 说 明 】 
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语句 声明 了 初始 数据 为 内 含 字 符 串 元 素 的 数组 实例 的 变量 fruits。 


let product = {id: 5685, name: 'Tablet PC', color: 'Gold', Price: '1200', OS: 'Android'} ; 


语句 声明 了 初始 数据 为 对 象 实例 的 变量 products。 


let message = '', count = 1 ; 


语句 声明 了 初始 数据 为 空 字 符 串 的 变量 message， 以 及 初始 数值 为 整数 1 的 变量 count。 


while (count < fruits.length + 1) 


在 while 循环 语句 的 小 括号 里 ， 每 当 其 比较 表达 式 【count < fruits.length + 1】 为 真 时 ， 其 大 括 
号 里 的 源 代码 片段 ， 就 会 被 执行 1 次 。 
{ 


message += `(${count}) ${fruits[count - 1]} “~; 
Count++ ; 


} 


在 此 , 直到 【count < fruits.length + 1】 为 假 之 前 , while 循环 语句 总 共 夫 代 了 17 次 , 渐次 将 【( 编 
号 ) 水 果 名 称 】 模 式 的 字符 串 ， 衔 接 至 变量 message 的 数据 字符 串 里 ， 最 后 演变 成 为 如 下 字符 串 : 
® (1) apple (2) blueberry (3) cherry (4) durian (5) Fig (6) Grape (7) Haw (8) Kiwi 
(9)Lichee (10) Mango (11) Nucleus (12) Orange (13) Pear 

(15) Strawberry (16) Tangerine (17) Watermelon 


(14) Raspberry 


console.log (message) ; 
console.1log('') ; 


message = '', count = 1 3} 


此 语句 重新 设置 变量 message 和 count 的 新 数据 。 
do 
{ 


message +=“($ftcount}) $ftfruits [count - 1]} 
Count++ 了 


} while (count < fruits.length + 1) ; 
在 此 ， 上 述 do...while 循环 语句 至 少 会 迭代 1 次 , 这 是 因为 其 比较 表达 式 【count < fruits.length 
+1】 被 安排 在 整个 末尾 的 小 括号 里 。 换 言 之 ， 其 大 括号 里 的 源 代码 片段 ， 至 少 会 被 执行 1 次 。 
4.2.3 ”break 与 continue 语句 


在 循环 语句 中 ， 关 键 字 break 加 上 分 号 而 形成 的 break 语句 【break ;】， 可 用 来 终止 循环 语句 
的 执行 ， 关键 字 continue 加 上 分 号 而 形成 的 continue 语句 【continue ;】， 则 可 用 来 直接 跳 至 循环 语 
名 的 下 一 次 迭代 动作 。 关 于 break 与 continue 语句 的 综合 运用 ， 可 参考 如 下 示例 。 


【4-2-3-statements-of-break-and-continue.js】 


let weekday = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday','Sunday'] ; 
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【相关 说 明 】 


此 语句 声明 了 初始 数据 为 【内 含 字符 串 元 素 的 数组 实例 】 的 变量 weekday。 


此 语句 声明 了 初始 数据 为 字符 串 的 变量 message。 


此 语句 声明 了 变量 bnum， 并 设置 其 初始 数值 成 为 【大 于 或 等 于 3 且 小 于 7】 的 随机 整数 值 。 


此 语句 声明 了 变量 cnum01， 并 设置 其 初始 数值 为 【大 于 或 等 于 0 且 小 于 3】 的 随机 整数 值 。 


此 语句 声明 了 变量 cnum02， 并 设置 其 初始 数值 也 为 【大 于 或 等 于 3 且 小 于 7] 的 随机 整数 值 。 
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if (i == bnum) break ; 


message += weekday[i] + ', '; 
} 


此 for 循环 语句 的 重点 ， 在 于 子 语句 【if(i 一 bnum) break ;】。 若 其 比较 表达 式 【i == bnum】 
为 真 ， 则 执行 【break ;】 子 语句 ， 进 而 立即 终止 这 个 循环 语句 的 执行 。 

message = message.slice(0, -2) ; 

因为 变量 message 的 数据 为 字符 串 ， 所 以 存在 内 置 函 数 slice() 可 被 调用 。 调 用 函数 
messsage.slice(0, -2), 可 使 得 其 数据 字符 串 的 末尾 的 逗号 [，] 被 移 除 。 例 如 : 从 字符 串 'week: Monday， 
Tuesday, Wednesday,， 变 成 'week: Monday, Tuesday, Wednesday'。 


console.log (message) ; 


message = 'Cannot have day-off on: '; 
此 语句 重新 设置 了 变量 message 的 数据 字符 串 。 


for (let i = 0; i < weekday.length; i++) 
{ 


if (i == cnum01 || i == cnum02) continue ; 


message += weekday[i] + ', '; 
} 


此 for 循环 语句 的 重点 ， 在 于 子 语句 【让 (i== cnum01 ||i== cnum02) continue ;】。 若 其 比较 表 
达 式 【i== cnum01 ||i== cnum02】 为 真 ， 则 执行 【continue ;】 子 语句 ， 进 而 立即 进行 下 一 次 迭代 。 


4.3 练 习 题 


1. 请 将 如 下 条 件 表达 式 ， 分 别 改写 为 让 语句 和 switch 语句 的 版 本 : 
let dtype = ['integer', 'float', 'alphabet'] [parseInt (3 * Math.random())] ; 


let value = 
dtype == 'integer' ? parseInt (100 * Math.random()) : 
dtype == 'float' ? (100 * Math.random()) .toFixed(3) : 
dtype == 'alphabet' ? String.fromCharCode(65 + parseInt (26 * Math.random())) : null ; 


console.log(value) ; 
2. 已 知 如 下 数组 实例 : 
let num list = [10, 33, 21, 56, 77, 64, 82, 98, 2] ; 


试 着 编写 通过 for、for...of 和 for...in 语句 的 版 本 ， 将 上 述 数组 实例 中 所 有 元 素 的 整数 值 的 总 
和 ， 赋 给 变量 result， 并 且 显 示 出 来 。 
3. 已 知 存在 如 下 对 象 实例 : 
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let chairs = {wood: 15, metal: 23, plastic: 37, others: 60} ; 
试 着 编写 通过 循环 语句 的 版 本 ， 将 上 述 对 象 实例 中 的 数据 ， 显 示 成 为 如 下 分 行 的 信息 : 


wood: 15 
metal: 23 
Plastic: 37 
others:60 


4. 已 知 存在 如 下 数据 为 字符 串 的 变量 str: 
let str = 'Happily ever after.' ; 
试 着 编写 可 颠倒 显示 成 为 如 下 字符 串 的 版 本 : 
.retfa reve ylippaH 
5. 完 成 如 下 两 小 题 。 
(1) 定义 【通过 参数 数据 的 不 同 ， 而 迭代 如 下 其 中 一 组 字符 串 】 的 迭代 函数 weekday(): 
星期 日 一 星期 一 一 星期 二 一 星期 三 一 星期 四 一 星期 五 一 星期 六 
Sunday 一 Monday 一 Tuesday 一 Wednesday 一 Thursday 一 Friday 一 Saturday 
(2) 配合 循环 语句 ， 调 用 weekday0，【 分 别 】 显 示 其 中 一 组 字符 串 。 
6. 已 知 如 下 数组 实例 : 
let base list = [7, 12, 21, 30, 40, 55] ; 
试 着 编写 通过 for、while 和 do…while 语句 的 版 本 ， 以 计算 并 显示 出 上 述 数 组 实例 中 各 元 素 的 
整数 值 的 平方 和 。 
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小 函数 与 方法 


在 特定 对 象 (object) 或 类 (class) 的 定义 语法 里 ， 被 进一步 定义 的 函数 〈function) ， 可 被 称 
为 方法 (method) 。 在 JavaScript 语言 中 ， 函 数 (function) 的 定义 ， 内 含 实现 特定 任务 的 源 代码 块 。 
因此 ， 调 用 函数 ， 就 等 同 于 执行 特定 任务 的 源 代码 块 。 


5.1 因数 的 定义 


在 现今 的 JavaScript 语言 里 ， 函 数 的 定义 形式 有 好 几 种 ， 其 语法 格式 大 致 包含 关键 字 function、 
函数 名 称 (function name) 、 在 一 对 小 括号 里 的 参数 列 (parameter/ argument list) ， 以 及 在 一 对 大 
括号 里 的 主体 (body) 源 代 码 块 。 其 中 ， 有 些 定义 形式 ， 不 具有 关键 字 function、 函 数 名 称 或 参数 
列 。 


5.1.1 不 同形 式 的 函数 〈ES6) 


1. 标准 函数 
标准 函数 的 定义 语法 如 下 : 
(1) 


function 函数 名 称 (参数 列 ) 
{ 
| 


(2) 


let 作为 匿名 函数 的 别名 的 变量 名 称 = function (参数 列 ) 
{ 
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其 中 , 在 此 可 省 略 关键 字 let, 或 者 变更 为 关键 字 var。 等 号 后 方 的 【function (参数 列 ) {…} ;】， 
因为 不 具有 函数 名 称 ， 所 以 可 被 称 为 匿名 函数 (Canonymous function) 的 定义 。【 作 为 匿名 函数 的 


别名 的 变量 名 称 ] 具 有 函数 名 称 的 特征 。 在 此 , 整个 语句 可 被 称 为 函数 表达 式 (function expression ) ， 
因此 在 末尾 处 ， 应 该 加 上 分 号 【;】。 关 于 标准 函数 的 综合 运用 ， 可 参考 如 下 示例 。 


【5-1-1-e1-standard-functionsjs】 
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// function-expression variable 

let displaying = function (num) 

{ 

console.1log (“The tested number = $tnum} ) ; 
D3 


displaying (12) ; 
【相关 说 明 】 
range_calc(5, 15, +') ; 
此 语句 调用 了 传 入 3 个 参数 数据 的 函数 range_calc(5, 15, '+')。 


console.1log('') 


function range calcl(start, end, type) 

此 语句 通过 关键 字 function， 定 义 名 称 为 range_calc 的 函数 。 位 于 其 函数 名 称 右 侧 小 括号 内 的 
部 分 ， 是 以 逗号 【,】 隔 开 多 个 参数 名 称 的 参数 列 。 参 数 如 同 函 数 内 部 的 局 部 变量 ， 而 此 函数 有 3 
个 参数 ， 分 别 为 start、end 与 type。 

{ 


let result ; 
在 函数 大 括号 内 ， 通 过 关键 字 var 或 let 声明 的 变量 ， 是 这 个 函数 的 局 部 变量 。 也 因此 ，result 
在 此 为 局 部 变量 。 
if ('+-*/'.indexOf (type) == -1) 
此 语法 是 用 来 判断 变量 type 中 的 字符 ， 是 否 存 在 于 字符 串 +-*/' 中 。 变 量 type 当前 的 数据 为 字 
符 '+',， 使 得 比较 表达 式 【'+-*/.indexOftype) 一 -1】 为 假 。 因 此 ， 证 语句 大 括号 里 的 源 代码 片段 ， 
并 不 会 被 执行 。 


{ 
console.log('Unsupported calculation...') ; 


return NaN ; 


在 此 ，【return NaN ;】 被 执行 时 ， 即 是 完成 此 函数 的 调用 任务 ， 并 返回 NaN。 


else 


if ('*/'.indexof (type) == -1) result = 0 ; 
比较 表达 式 【*/'.indexOfttype) 一 -1】 是 用 来 判断 变量 type 中 的 字符 ， 是 否 在 字符 串 */ 里 。 若 
前 述 比 较 表达 式 为 真 ， 则 执行 【result= 0;】。 
else result = 1 ; 
车 上 述 比较 表达 式 为 假 ， 则 执行 【result= 1 ;】。 
} 
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for (let i = start; i < end + 1; i++) 
evall(‘result ${type}= i ;7°); 


从 变量 start 的 数值 S， 到 变量 end 的 数值 15， 上 述 for 语句 总 共 进 代 11 次 。 在 【evalCresult 
$f{type}=i;');】 中 的 格式 化 字符 串 【Mresult ${type}=i;`】, 会 先 被 转换 成 为 字符 串 'result += i;'， 然 
后 作为 参数 数据 ， 传 入 内 置 函 数 eval()， 使 得 字符 串 'result +=i ;， 最 终 被 转换 成 为 真正 可 执行 的 表 
达 式 【result+=i;】。 


console.log( ‘The result of operator ${type} action from ${start} to ${end} = ${result} ) ; 


i 


语句 显示 出 【The result of operator + action fom 5 to 15 = 110】 的 信息 。 


return result ; 


此 语句 ， 即 是 完成 了 这 个 函数 的 调用 任务 ， 并 返回 变量 result 的 数值 110。 


let returned = null ; 
此 语句 声明 了 初始 数据 为 null 的 变量 returned。 
range_ calc(1l, 10, '+') ; 
此 语句 调用 了 函数 range_calc(1, 10, '+"), 进而 执行 此 函数 内 部 的 源 代 码 块 , 最 终 计 算出 1 +2+ 
3+ … + 10 的 结果 值 55。 
ange_calc(1l, 10, '-'); 
此 语句 调用 了 函数 range_calc(1, 10,'-), 进而 执行 此 函数 内 部 的 源 代 码 , 最 终 计算 出 -1 - 2 - 3 -… 
- 10 的 结果 值 -55。 
returned = range calc(1, 10, '*') ; 

语句 调用 了 函数 range_calc(1, 10,*)， 进 而 执行 此 函数 内 部 的 源 代码 ， 最 终 计 算出 1 X 2 x 
3 X…X 10 的 结果 值 3628800， 并 返回 给 变量 returned。 


console.log (returned) ; 


3 


i 


t 


语句 显示 变量 returned 当前 的 数值 3628800。 


returned = range calc(l, 3, '/'); 


语句 调用 了 函数 range_calc(1, 3, '")， 进 而 执行 此 函数 内 部 的 源 代码 ， 最 终 计 算出 1 + 2 3 
的 结果 值 0.16666666666666666， 并 返回 给 变量 returned。 


已 


console.log (returned) ; 


语句 显示 变量 returned 当前 的 数值 0.16666666666666666。 


扎 


// if uncomment the following code, there will show 'displaying is not defined' error message. 
// displaying(12) ; 


// function-expression variable 
let displaying = function (num) 
{ 
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console.1og (“The tested number = Stnumj `) ; 

] 

在 此 段 语 法 中 ,【function (num) { .… }】 定 义 了 没有 名 称 的 匿名 函数 。 而 且 , 变量 名 称 displaying 
如 同 是 该 匿名 函数 的 别名 (alias name) 。 


displaying (12) ; 


此 语句 调用 了 参数 数值 为 12 的 函数 displaying(12)， 使 得 【The tested number = 12】 被 显示 出 
来 。 


2. 匿名 函数 


匿名 (anonymous) 函数 的 语法 格式 如 下 : 
(1) 

function (参数 列 ) 

{ 


| 
} 


这 种 形式 的 匿名 函数 的 定义 语法 ， 没 有 可 调用 的 函数 名 称 ， 因 此 必须 依附 于 可 间接 调用 这 个 
匿名 函数 的 特殊 语法 里 。 

(2) 

(function (参数 列 ) 

{ 

| 

} 

NA 

这 种 形式 的 匿名 函数 的 定义 语法 ， 也 没有 可 调用 的 函数 名 称 ， 但 是 ， 却 可 立即 调用 这 个 匿名 
函数 。 

(3) 

void function (参数 列 ) 

{ 


| 
RO 


这 种 形式 的 匿名 函数 的 定义 语法 ， 虽 然 也 没有 可 调用 的 函数 名 称 ; 但 是 ， 却 也 可 立即 调用 这 
个 匿名 函数 。 此 定义 语法 ， 借 助 关键 字 void， 替 代 了 在 【上 一 种 匿名 函数 的 定义 语法 】 的 外 侧 小 
括号 。 关 于 匿名 函数 的 综合 运用 ， 可 参考 如 下 示例 。 


【5-1-1-e2-anonymous-functions.js】 


(function () 
入 
console.1log('Anonymous 01 function is executed!') ; 
} 
)0F5 


void function () 


{ 
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console.1log('Rnomynous function 02 is executed.') ; 
Hons 


setTimeout (function () { console.log('Showing after 2 seconds.') ; }, 2000) ; 


/LA/ 
let displaying = function (num = 0) 
{ 
console.log(‘The test number = ${num} ) ; 
' 


displaying(15) ; 
setTimeout (displaying, 1000) ; 
setTimeout (displaying (21), 1500) ; 


setTimeout (() => console.log('The test number = 1800'), 3000) ; 


【相关 说 明 】 


(function () 


{ 


console.log('Anonymous function 01 is executed.') ; 


} 
| 


此 语法 定义 并 立即 调用 了 匿名 函数 , 进而 显示 出 【Anonymous function 01 is executed.】 的 信息 。 
这 种 调用 函数 的 方式 格外 特别 ， 仅 供 调用 匿名 函数 1 次 。 

void function () 

{ 


console.log('Anomynous function 02 is executed.') ; 
站 和 


此 语法 则 借助 关键 字 void， 蔡 代 了 在 【上 一 个 匿名 函数 的 定义 语法 】 的 外 侧 小 括号 ， 亦 定义 
并 立即 调用 了 匿名 函数 ， 进 而 显示 出 【Anomynous function 02 is executed.】 的 信息 。 此 语法 仅 能 调 
用 匿名 函数 1 次 。 

setTimeout (function () { console.log('Showing after 2 seconds.') ; }，2000) ; 

内 置 函数 setTimeout() 可 用 来 设置 每 阳 多 少时 间 , 调用 匿名 函数 1 次 。 在 这 个 setTimeout() 的 小 
括号 中 , 第 1 个 参数 为 匿名 函数 的 定义 语法 【function () { console.log('Showing after 2 seconds.') ; } 】， 
第 2 个 参数 的 数值 ， 代 表 着 每 次 调用 前 述 匿名 函数 的 间隔 时 间 ， 在 此 为 2000 毫秒 ， 也 就 是 2 秒 。 
换言之 ， 此 语句 使 得 第 1 个 参数 的 匿名 函数 ， 每 隔 2 秒 就 被 调用 一 次 。 

let displaying = function (num = 0) 

{ 


console.1og(`The test number = Sfnum}`) ; 
这 


这 个 语法 中 的 【function (num = 0) { … }】， 定 义 了 没有 名 称 的 匿名 函数 。 也 因此 ， 变 量 名 称 
displaying 如 同 是 该 匿名 函数 的 别名 (alias name) 。 其 中 ,， 【Cum = 0)】 是 用 来 设置 参数 num 的 默 
认 数 值 为 0。 
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displaying(15) ; 
语句 以 传 入 参数 数值 15 的 方式 ， 调 用 函数 displaying(15)。 
setTimeout (displaying，1000) ; 


语句 使 得 每 隔 1 秒 ， 就 间接 调用 名 称 为 displaying 的 函数 。 调 用 时 ， 没 有 传 入 参数 数值 ， 所 
以 等 同 于 参数 数值 为 默认 数值 0。 


setTimeout (displaying, 1500) ; 


语句 使 得 每 隔 1.5 秒 ， 就 间接 调用 名 称 为 displaying 的 函数 。 
setTimeout (() => console.log('The test number = 1800'), 3000) ; 
此 语句 使 得 每 阳 3 秒 ， 就 间接 调用 匿名 函数 【() => console.log('The test number = 1800)】。 此 
匿名 函数 是 借助 箭头 符号 【=>】 而 实现 的 箭头 函数 (arrow function) 。 
3. 对 象 函数 
在 对 象 (object) 的 定义 语法 里 ， 除 了 可 描述 代表 特定 数据 的 属性 (property) 之 外 ， 亦 可 描述 


代表 特定 行为 的 方法 Cmethod) /函数 (function) 。JavaScript 语言 支持 如 下 对 象 函数 的 两 种 定义 
形式 : 


(1) 


var 变量 名 称 = 
{ 
| 


对 象 函数 的 名 称 : function (参数 列 ) 
{ 


(2) 


var 变量 名 称 = 
{ 
| 


对 象 函数 的 名 称 (参数 列 ) 


在 上 述 两 种 对 象 的 定义 语法 里 ， 均 可 用 来 描述 对 象 函数 。 调 用 对 象 函数 的 语法 为 【变量 名 称 . 
对 象 函数 名 称 (参数 列 );】。 关 于 对 象 函数 的 综合 运用 ， 可 参考 如 下 两 个 示例 。 
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【5-1-1-e3-function-similar-properties-part1.js】 


【相关 说 明 】 
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} 
上 述 匈 长 的 语法 ， 声 明了 初始 数据 为 【内 含 多 个 函数 的 对 象 实例 】 的 变量 r obj。 
console.log(r_obj.circle area(10)) ; 


【r_obj.circle_area(10)】 调 用 了 变量 r_obj 内 的 对 象 函数 circle_are(10)， 以 返 
面积 314.1592653589793。 


五 
珊 


半径 为 10 的 


console.log(r_obj['circle_area'](10)) ; 

【r_obj['circle_area"(10)】 亦 调用 了 变量 r_obj 内 的 对 象 函数 circle_are(10)， 并 返回 半径 为 10 

的 圆 面积 314.1592653589793。 因为 变量 r_obj 当前 的 数据 是 对 象 实 例 , 所 以 可 通过 中 括号 运算 符 []， 
加 以 访问 内 部 的 属性 或 函数 。 


console.log(r obj.circumference(15)) ; 
console.log(r_ obj['circumference'] (15)) ; 


这 两 个 语句 的 效果 相同 ， 皆 会 显示 出 半径 为 15 的 圆周 长 94.24777960769379。 


console.log(r obj.sphere volume (20)) ; 
console.log(r_obj['sphere volume'] (20)) ; 


这 两 个 语句 的 效果 相同 ， 皆 会 显示 出 半径 为 20 的 球体 积 33510.32163829113。 


console.log(r obj.cylinder volume (10, 20)) ; 
console.log(r obj['cylinder volume'] (10, 20)) ; 


这 两 个 语句 的 效果 也 相同 ， 皆 会 显示 出 半径 为 10、 高 度 为 20 的 圆柱 体积 6283.185307179587。 
【5-1-1-e4-function-similar-properties-part2.js】 


Var cubic obj = 
{ 
length: 1, 
width: 1, 
height: 1, 
volume: function () 
{ 
return this.length * this.width * this.height ; 
}, 
surface area() 
{ 
with (this) 
return 2 * (length * width + width * height + height * length) ; 
} 
} 


console.log (cubic obj.volume()) ; 
console.log(cubic obj.surface area()) ; 
console.10g('') ; 

cubic obj.length = 10 ; 


cubic obj.width = 20 ; 
cubic obj.height = 30 ; 
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console.log(cubic obj .volume()) ; 


console.log(cubic_obj .surface_area()) ; 


【相关 说 明 】 


var cubic obj 
{ 
length: 1, 
width: 1, 
height: 1, 
volume: function () 
{ 
return this.length * this.width * this.height ; 
}， 
surface area() 
{ 
with (this) 


return 2 * (length * width + width * height + height * length) ; 


} 
和 


此 语法 声明 了 初始 数据 为 【内 含 多 个 
console.log (cubic obj.volume()) ; 


在 变量 cubic_obj 的 对 象 实例 中 ， 其 3 个 属性 length (长 
值 皆 为 1， 所 以 cubic_obj.volume0 会 


E33 


console.log (cubic obj.surface area()) ; 


cubic_obj.surface_area() 则 会 返 
console.1log('') ; 
cubic obj.length = 10 ; 


cubic obj.width = 20 ; 
cubic obj.height = 30 ; 


这 3 新 设置 了 在 变量 cubic_obj 的 对 象 实例 中 的 
分 别 为 10、20 与 30。 


:五 
个 语气 


console.log (cubic obj.volume()) ; 


回 长 、 宽 和 高 分 别 为 10、20 
console.log(cubic obj.surface area()) ; 


回 长 、 宽 和 高 分 别 为 10、20 


cubic_obj.volume0 在 此 会 返 


cubic_obj.volume0 在 此 会 返 
4. 箭头 函数 


在 特定 函数 的 主体 内 ， 若 其 源 代码 块 较为 简短 ， 则 可 被 


箭头 函数 (arrow function) ， 见 表 5-1。 


属性 和 函数 的 对 象 实例 】 的 变量 cubic_obj。 


) 、width 〔〈 宽 ) 和 height (高 ) 的 数 


返回 长 、 宽 和 高 缘 为 1 的 正方 体积 1。 


回 长 、 宽 和 高 皆 为 1 的 正方 体 表 面积 6。 


属性 length、width 和 height 的 数值 ， 


与 30 的 长 方 体积 6000。 


与 30 的 长 方 体 表面 积 2200。 


星 


新 定义 成 为 带 有 箭头 符号 【=>】 的 
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表 5-1 箭头 函数 的 语法 格式 
箭头 的 左 侧 语法 “| 箭头 箭头 的 右 侧 语法 
" { 被 分 号 隔 开 的 多 个 语句 } 
"{f retum 语句 } 


(参数 列 ) *return 以 外 的 单一 语句 
单一 参数 名 称 过 >” |， 可 被 评估 的 单一 表达 式 
0 " (可 被 评估 的 单一 表达 式 ) 


* (单一 数组 实例 ) 
* (单一 对 象 实例 ) 


在 箭头 函数 的 定义 语法 里 ， 并 没有 函数 名 称 ， 所 以 箭头 函数 也 是 匿名 函数 的 一 种 ， 其 定义 语 
法 必须 依附 于 【可 间接 调用 匿名 函数 】 的 语法 中 。 关 于 箭头 函数 的 综合 运用 ， 可 参考 如 下 示例 。 


【5-1-1-e5-arrow-functions.js】 


function sphere01(r) 
{ 


values = {} ; 


values.volume = 4 / 3 * Math.PI * Math.pow(r, 3) ; 
values.surface area = 4 * Math.PI * r*r; 


return values ; 

let sphere02 = (r) => { return { volume: 4 / 3 * Math.PI * Math.pow(r, 3), surface areal: 
4* Math.PI *r*r}}; 

console.log(sphere02(10)) ; 


let sphere03 = r => { return { volume: 4 / 3 * Math.PI * Math.pow(r, 3), surface area: 
yd 


console.log (sphere03(10)) ; 


let sphere04 = r => ( { volume: 4 / 3 * Math.PI * Math.pow(r, 3), surface area: 4 * Math.PI 


a 
console.log (sphere04(10)) ; 
let sphere volume = r => { return 4 / 3 * Math.PI * Math.pow(r, 3) }; 
console.log (sphere volume(10)) ; 
let sphere surface area = r => 4 * Math.PI*r*r,; 
console.log (sphere surface area(10)) ; 


// setInterval( function() { console.log( new Date() .getSeconds() ) } , 3000 ) ，; 
setInterval( () => console.log( new Date() .getSeconds() ) , 3000 ); 
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【相关 说 明 】 


function sphere01(r) 
{ 
values = {} ; 


values.volume = 4 / 3 * Math.PI * Math.pow(r, 3) ; 
values.surface area = 4 * Math.PI * 工 * 工 了 


return values ; 
} 


此 段 语法 是 标准 函数 的 定义 形式 之 一 。 也 就 是 【function 函数 名 称 ( 参 数列 ) {… }】。 在 上 述 函 
数 中 ， 其 返回 数据 为 局 部 变量 values 中 的 对 象 实例 {volume: 球体 积 的 数值 , surface_area: 球体 表面 
积 的 数值 } 。 


let sphere02 = (r) => { return { volume: 4 / 3 * Math.PI * Math.pow(r, 3), surface area: 
LD 


此 段 语法 则 是 箭头 函数 的 定义 形式 之 一 ， 也 就 是 【let 作为 函数 的 别名 的 变量 名 称 = (参数 列 ) 
=> {.. } ;】。 注意， 此 函数 的 返回 数据 为 对 象 实例 { volume: 球体 积 的 数值 , surface_area: 球体 表面 
职 的 数值 }。 


console.log(sphere02(10)) ; 


调用 sphere02(10) 会 返回 对 象 实例 {volume: 4188.790204786391, surface_area: 1256.6370614359173}。 


let sphere03 = r => { return { volume: 4 / 3 * Math.PI * Math.pow(r, 3), surface area: 
Ms Mm 


此 段 语法 是 【单一 参数 】 的 箭头 函数 的 定义 形式 之 一 ， 也 就 是 【let 作为 函数 的 别名 的 变量 名 
称 = 唯一 的 参数 名 称 => { … } ;】。 此 函数 的 返回 数据 为 对 象 实例 {volume: 球体 积 的 数值 ， 
surface_area: 球体 表面 积 的 数值 } 。 


console.log(sphere03(10)) ; 


调用 sphere03(10) 会 返回 对 象 实例 {volume: 4188.790204786391, surface_area: 1256.6370614359173}。 
let sphere04 = => ( { volume: 4 / 3 * Math.PI * Math.pow(r, 3), surface area: 4 * Math.PI 
We eR 
此 段 语 法 为 【单一 参数 、 省 略 关键 字 retum 】 的 箭头 函数 的 定义 形式 之 一 ， 也 就 是 【let 作为 
函数 的 别名 的 变量 名 称 = 唯一 的 参数 名 称 => ( 对 象 实例 ) ;】。 在 箭头 运算 符 【=>】 右 侧 的 对 象 
实例 外 侧 , 必须 加 上 一 对 小 括号 里 , 才 不 至 于 发 生 错误 。 此 函数 的 返回 数据 为 对 象 实例 { volume: 球 
体积 的 数值 , surface_area: 球体 表面 积 的 数值 } 。 


console.log(sphere04(10)) ; 


调用 sphere04(10) 会 返回 对 象 实例 fvolume: 4188.790204786391, surface_area: 1256.6370614359173}。 

let sphere volume = r => { return 4 / 3 * Math.PI * Math.pow(r, 3) } : 

此 段 语 法 为 【单一 参数 】 的 箭头 函数 的 定义 形式 之 一 ， 也 就 是 【作为 函数 的 别名 的 变量 名 称 = 
唯一 的 参数 名 称 => { return 语句 } ;】。 此 函数 的 返回 数据 为 球体 积 的 数值 。 
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console.1log (sphere_volume (10)) ; 


调用 sphere_volume(10) 会 返回 球体 积 4188.790204786391。 

let sphere surface area =r => 4* Math.PI * r*r; 

此 段 语 法 为 【单一 参数 、 省 略 关键 字 retum、 最 简化 】 的 箭头 函数 的 定义 形式 之 一 , 也 就 是 【 作 
为 函数 的 别名 的 变量 名 称 = 唯一 的 参数 名 称 => 可 被 评估 的 单一 表达 式 ;】。 注 意 ， 在 箭头 运算 
符 【=>】 右 侧 的 小 括号 已 经 被 省 略 了 。 此 函数 的 返回 数据 为 球体 表面 积 的 数值 。 


console.1og (sphere_surface area(10)) ; 


五 


调用 sphere_surface_area(10) 会 返回 球体 表面 积 1256.6370614359173 。 


// setInterval( function() { console.log( new Date() .getSeconds() ) } , 3000 ) ; 
setInterval( () => console.1og( new Date() .getSeconds() ) , 3000 ) ; 


【0 => console.log( new Date() .getSeconds0】 是 第 头 函数 最 简化 的 定义 形式 之 一 , 也 就 是 【O=> 
单一 语句 】。 另 外 ， 此 语句 实现 的 功能 ， 是 每 隔 3 秒 ， 显 示 当 前 时 间 的 秒 数 。 

5. 块 范围 的 函数 

在 JavaScript 语言 中 ， 块 范围 (block scope) 是 指 一 对 大 括号 里 的 范围 。 在 特定 块 范围 里 ， 若 
遵循 特定 规则 (例如 : 通过 关键 字 let， 而 不 是 关键 字 var， 声 明 特定 变量 或 定义 特定 函数 ) ， 则 在 
块 范围 之 外 是 无 法 访问 到 块 范围 里 的 变量 或 函数 的 。 关 于 块 范围 的 函数 的 运用 ， 可 参考 如 下 示例 。 

【5-1-1-e6-block-scope-function.js 】 


function cylinder(r, h) 
{ 

function circle(r) 

{ 


var values = {} ; 


Values.area = Math.PI * r*r; 
values.circumference = 2 * Math.PI * r; 


return values ; 


} 
var values = {}; 
values.circle = circle(r) ; 


values.volume = values.circle.area * h; 
values.surface area = 2 * values.circle.area + values.circle.circumference * h; 


return values ; 


} 
let result = cylinder(12, 50) ; 
console.log(result .circle) ; 


console.log (result .volume) ; 
console.log (result.surface area) ; 
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【相关 说 明 】 


function cylinder(r，h) 


{ 
function circle(r) 


{ 
var values = {} ; 
values.area = Math.PT * r* rs 
此 语句 将 特定 圆 面积 的 数值 ， 赋 给 变量 values 的 对 象 实例 的 属性 area。 
values.circumference = 2 * Math.PI * 工 ; 
此 语句 将 特定 圆周 长 的 数值 ， 赋 给 变量 values 的 对 象 实例 的 属性 circumference。 
return Values ; 
此 语句 返回 局 部 变量 values 的 对 象 实例 farea: 圆 面积 的 数值 , circumference: 圆周 长 的 数值 } 。 
} 


EE 


var values = {}; 


values.circle = circlel(r) ; 


语句 调用 了 函数 circle(r)， 并 将 其 返回 值 ， 赋 给 变量 values 的 对 象 实例 的 属性 circle。 


ve. 


values.volume = values.circle.area * h; 
此 语句 将 特定 圆柱 体积 〈 圆 面积 X 高 ) 的 数值 ， 赋 给 变量 values 的 对 象 实例 的 属性 volume。 
values.surface area = 2 * values.circle.area + values.circle.circumference * h 

此 语句 将 特定 圆柱 体 表面 积 (2X 圆 面积 + 圆周 长 X 高 ) 的 数值 ， 赋 给 变量 values 的 对 象 实例 
的 属性 surface_area。 


return values ; 
此 语句 返回 局 部 变量 values 的 对 象 实例 fcircle: {area: 圆 面积 的 数值 , circumference: 圆周 长 的 
数值 }, volume: 球体 积 的 数值 , surface_area: 球体 表面 积 的 数值 } 。 

值得 注意 的 是 , 在 被 返回 的 对 象 实例 中 , 还 存在 子 对 象 实例 {area: 圆 面积 的 数值 , circumference: 
圆周 长 的 数值 } 。 
} 
在 上 述 源 代码 中 ,可 看 到 两 个 函数 cylinder() 与 circle0。 其 中 ,函数 circle0 被 定义 于 函数 cylinder() 
的 内 部 。 这 就 意味 着 ， 调 用 函数 circle()， 只 能 进行 于 函数 cylinder0 的 内 部 ! 

let result = cylinder(12，50) ; 


此 语句 将 函数 cylinder(12, 50) 所 返回 的 对 象 实例 ， 赋 给 变量 result。 


console.log (result.circle) ; 
此 语句 显示 出 {farea: 452.3893421169302, circumference: 75.39822368615503} 的 信息 。 


console.1log (result .volume) ; 
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此 语句 显示 出 22619.46710584651 的 信息 。 


此 语句 显示 出 4674.689868541612 的 信息 。 


5.1.2 ”函数 名 称 (ES6) 


在 编程 语言 中 , 函数 名 称 (function name ) 主要 用 于 重复 调用 特定 函数 。 没 有 名 称 的 匿名 函数 ， 
可 通过 特殊 语法 ， 间 接 或 立即 调用 特定 匿名 函数 。 下 面 对 函 数 名 称 的 定义 和 和 运用， 进行 举例 说 明 。 


【5-1-2-function-names.js】 


【相关 说 明 】 


此 语法 定义 了 名 称 为 display01 的 函数 。 


在 此 语法 的 等 号 右 侧 ， 定 义 了 没有 名 称 的 匿名 函数 。 然 而 ， 变 量 名 称 display02， 变 成 此 匿名 
函数 的 别名 。 
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此 语句 调用 了 名 称 为 display01 的 函数 。 
display02() ; 
此 语句 则 调用 了 名 称 为 display02 的 函数 。 


(function () 
{ 
console.1log('Anonymous displaying.') ; 
} 
) () 地 


这 个 特殊 语法 ， 定 义 并 立即 调用 了 没有 名 称 的 匿名 函数 。 
setTimeout (function () { console.log('Indirect anonymous displaying.') ; }, 1000) ; 


此 语句 在 1 秒 之 后 ， 间 接 调用 了 没有 名 称 的 匿名 函数 【function () { console.log('Indirect 


anonymous displaying.)】。 


setTimeout (() => console.log('Indirect arrow-type anonymous displaying.'), 1500) ; 


此 语句 则 在 1.5 秒 之 后 , 间接 调用 了 第 头 函数 【0 => console.log('Indirect arrow-type anonymous 
displaying.)】。 


5.1.3 参数 (ES6) 


在 特定 函数 的 参数 列 里 ， 可 描述 多 个 参数 parameter) 的 名 称 。 参 数 在 函数 主体 的 内 部 ， 被 
视 为 局 部 变量 (local variable ) 。 例 如 , 在 语法 【profile(a01 = 'none', a02 = none', a03 = 'none', ... others)】 
中 ，a01、a02、a03 和 others 是 函数 profile() 的 参数 (parameter) 。 

特定 函数 被 调用 时 ,需要 提 及 函数 名 称 和 传 入 的 参数 数据 〈argument ) 。 例 如 ， 在 语法 
【profile('name', 'gender', 'age', 'position', department)】 中 ， 字 符 串 mame'、'gender、'age'、'position'、 
'department'， 就 是 被 传 入 函数 profile() 内 部 的 参数 数据 argument) 。 

特别 值得 注意 的 是 ，parameter 和 argument 皆 被 翻译 为 参数 ; 但 是 ， 读 者 应 该 要 加 以 区 别 ; 
parameter 是 指 参数 ，argument 是 指 被 传 入 的 参数 的 数据 。 

1. 参数 列 

在 特定 函数 的 定义 语法 中 ， 参 数列 可 内 含 多 个 参数 的 名 称 与 默认 数据 。 关 于 参数 列 的 综合 运 
用 ， 可 参考 如 下 示例 。 

【5-1-3-e1-parameterlistjs】 


function Profile(a01 = 'none', a02 = 'none', a03 = 'none', ... others) 
{ 

console.1og (arguments) ; 

console.1og (arguments .length) ; 

console.10g('') ; 


console.1og (arguments[0], arguments[1], arguments[2]) ; 
console.1log (a01, a02, a03) ; 
console.10g('') ; 
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console.log (others) ; 
console.1log (arguments[3]，arguments[4]) ; 
console.1log (others[0]，others[1]) ; 

} 


profile('name', 'gender', 'age', 'position', 'department') ; 
console.1log('') ; 
profile() ; 


/1 
console.log('\n\n') ; 


let arg list = ['model', 'name', 'color', 'weight', 'price'] ; 

profile(... arg list) ; 
【相关 说 明 】 

function profile(a0l = 'none', a02 = 'none', a03 = 'none', ... others) 

在 函数 profile0 的 参数 列 里 ， 存 在 4 个 参数 a01、a02、a03 与 others。 其 中 ， 前 3 个 参数 被 设 
置 了 默认 数据 ， 参 数 others 则 借助 扩展 运算 符 【.…】 而 变 成 数组 实例 ， 并 且 内 含 从 第 4 个 开始 的 被 
传 入 的 参数 数据 。 

{ 

console.log (arguments) ; 

局 部 变量 arguments 是 内 置 的 ， 所 以 在 任何 函数 的 内 部 ， 均 是 可 被 访问 的 。 举 例 来 说 ， 若 函数 
profile('name', 'gender', 'age', 'position', 'department') 被 调用 ， 则 其 内 部 的 局 部 变量 arguments 的 数据 ， 
将 会 是 【相似 于 数组 实例 】 的 Arguments 对 象 实例 ["name", "gender", "age", "position", "department"]。 

console.1og (arguments .length) ; 

若 函 数 profile('name', 'gender, 'age', 'position', 'department") 被 调用 ， 则 其 arguments.length 的 数 
值 ， 将 会 为 被 传 入 的 参数 数据 的 个 数 5。 


console.10og('') ; 


console.log(arguments[0], arguments[1], arguments[2]) ; 


若 函 数 profile('name', 'gender', 'age', 'position', 'department') 被 调用 , 则 此 语句 会 显示 [name gender 
age】 的 信息 。 


console.1og(a01，a02，a03) ; 


若 函 数 profile('name', 'gender', 'age', 'position', 'department') 被 调用 , 则 此 语句 会 显示 [name gender 
age】 的 信息 。 


console.10g('') ; 


console.log (others) ; 
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若 函数 profile('name', 'gender', 'age', 'position', 'department) 被 调用 ， 则 此 语句 会 显示 ["position'"， 
"department"] 的 信息 。 


console.1og (arguments [3]， arguments [4]) ; 
console.log (others[0] ，others[1]) ; 


若 函 数 profile('name', 'gender', 'age', position', department) 被 调用 ， 则 这 两 个 语句 会 显示 相同 的 
信息 【position department】。 

} 

profile('name', 'gender', 'age', 'position', 'department') ; 

在 此 ,函数 profile0 被 调用 时 ,被 传 入 了 5 个 字符 串 mame'、'gender'、'age'、'position' 与 'department'。 

console.10g('') 


profile() ; 


在 此 ， 函 数 profile() 被 调用 时 ， 并 没有 被 传 入 任何 参数 数据 。 所 以 ， 前 3 个 参数 将 会 分 别 采用 
其 默认 数据 ， 进 而 等 同 于 函数 profile(none', mmone', "none') 被 调用 时 的 效果 。 


console.log('\n\n') ; 


let arg_list = ['model', 'name', 'color', 'weight', 'price'] ; 

此 语句 声明 了 初始 数据 为 数组 实例 [model', "name', 'color', "weight, price'] 的 变量 arg_list。 

profile(... arg_list) ; 

借助 了 扩展 运算 符 【...】， 使 得 此 语句 等 同 于 调用 了 函数 profile(model', 'name', 'color', 'weight', 
'price')。 

2. 参数 的 默认 数据 

若 特定 参数 未 被 设置 默认 数据 〈default data) ， 则 内 置 的 默认 数据 会 是 原始 常量 undefined。 
欲 设置 特定 参数 的 默认 数据 ， 可 在 参数 名 称 的 后 方 加 上 【= 默认 数据 】， 成 为 【参数 名 称 = 默认 
数据 】 例 如 ,在 function income(identity ='company', currency ='USD', days = 30, daily_income = 5000) 
的 语法 里 : 
字符 串 'company' 是 参数 identity 的 默认 数据 。 
字符 串 'USD' 是 参数 currency 的 默认 数据 。 
整数 值 30 是 参数 days 的 默认 数值 。 
整数 值 5000 是 参数 daily_income 的 默认 数值 。 

调用 特定 函数 ， 却 未 传 入 特定 参数 (parameter) 的 数据 (argument) 时 ， 此 参数 的 默认 数据 ， 
会 被 视 为 当前 的 数据 。 关 于 参数 的 默认 数据 的 理解 和 运用 ， 可 参考 如 下 示例 。 

【5-1-3-e2-parameter-default-data.js】 


function income(identity = 'company', currency = 'USD', days = 30, daily income = 5000) 
{ 

Tet result = 0 4 

let monthly_ income = days * daily income ; 
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// monthly income = monthly income.toLocaleString() ; 
monthly income = Int1.NumberFormat () .format (monthly income) ; 


result = “The ${identity}'s monthly income = ${monthly income} ${currency}. ; 


console.1og (result) ; 
} 


income() ; 

income('Jasper') ; 

income('Paula', 'GBP') ; 

income('Eric', 'GBP', 31) ; 

income (undefined, 'RMB', undefined, 1000) ; 


【相关 说 明 】 
function income(identity = 'company', currency = 'USD', days = 30, daily income = 5000) 
在 此 语法 中 ， 函 数 income() 共 有 4 个 参数 ， 每 个 参数 皆 设 置 了 默认 数据 。 


{ 
let result = 0 ， 


let monthly_income = days * daily income ; 
在 此 段 语 法 中 ， 声 明了 变量 monthly_income， 其 初始 数值 为 当前 的 月 薪 的 数值 。 


// monthly income = monthly income.toLocaleString() ; 
monthly_income = Int1.NumberFormat ().format (monthly income) ; 


此 语句 将 变量 monthly_income 的 月 薪 的 数值 ， 转 换 成 为 具有 千 分 位 隔 符 (group seperator) 的 
字符 串 。 
result = ‘The ${identity}'s monthly income = ${monthly income} S${currency}  ; 


console.log (result) ; 


} 


income() ; 

此 语句 则 是 在 没有 传 入 任何 参数 数据 的 情况 下 , 直接 调用 函数 income(0)。 因 为 每 个 参数 皆 被 设 
置 了 默认 数据 ， 调 用 income0 等 同 于 调用 income('company', 'USD', 30, 5000)， 进 而 显示 出 【The 
company's monthly income = 150,000 USD】 的 信息 。 


income('Jasper') ; 


此 语句 仅 传 入 第 1 个 参数 的 数据 ， 即 调用 了 函数 income(Jasper)， 其 效果 等 同 于 调用 了 
income(Jasper', "USD', 30, 5000), 进而 显示 出 【The Jaspers monthly income = 150,000 USD 】 的 信息 。 


income('Paula', "GBP') ; 


此 语句 传 入 前 两 个 参数 的 数据 ， 即 调用 了 函数 income('Paula', 'GBP')， 其 效果 等 同 于 调用 了 
income('Paula', 'GBP', 30, 5000)， 进 而 显示 出 【The Paula's monthly income = 150,000 GBP】 的 信息 。 


income('Eric', 'GBP', 31) ; 
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此 语句 传 入 前 3 个 参数 的 数据 ， 即 调用 了 函数 income('Eric', 'GBP', 31)， 其 效果 等 同 于 调用 了 
income('Eric', 'GBP', 31, 5000)， 进 而 显示 出 【The Erics monthly income = 155,000 GBP】 的 信息 。 


income (undefined, 'RMB', undefined, 1000) ; 


此 语句 完整 传 入 4 个 参数 的 数据 ， 并 调用 了 函数 income(undefined, 'RMB', undefined, 1000)。 
因为 传 入 的 第 1 个 和 第 3 个 数据 为 undefined， 所 以 调用 income(undefined, 'RMB', undefined, 1000) 
如 同调 用 income('company','RMB', 30, 1000)， 进 而 显示 出 【The company's monthly income = 30,000 
RMB】 的 信息 。 

3. 参数 的 一 般配 对 

参数 的 一 般配 对 是 指 ， 在 特定 函数 参数 列 的 定义 中 存在 对 象 或 数组 的 描述 ， 此 函数 被 调用 时 
被 传 入 参数 的 数据 为 对 象 或 数组 。 关 于 参数 的 一 般配 对 的 综合 运用 ， 可 参考 如 下 示例 。 


【5-1-3-e3-parameter-common-matches.js】 


var item01 = {name: 'fruit set', price: 250} ; 


function display01 (item) 
{ 
with (item) 
message = ‘${name}'s price is ${price} dollars now。 ; 


return message ; 
} 


function display02({name, price}) 
{ 


message = “${name}'s price is ${price} dollars now.. ; 


return message ; 
} 


function display03({name: n, price: p}) 
{ 


message = `${n}'s price is ${p} dollars now。 ; 


return message ; 


} 


console.1log (display01 (item01)) ; 
console.1log (display02 (item01)) ; 
console.1log (display03 (item01)) ; 


MAA 
var item02 = ['bread set', 120] ; 


function display04 ([name, price]) 
{ 
message = `“${name}'s price is ${price} dollars now.. ; 


return message ; 


} 
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console.10g (display04 (item02)) ; 
【相关 说 明 】 
var item01 = {name: 'fruit set', price: 250} ; 
此 语句 声明 了 初始 数据 为 对 象 实例 {name: 'fruit_set', price: 250} 的 变量 item01。 
function display01 (item) 
于 此 语法 而 言 ， 若 传 入 的 数据 是 对 象 实例 {name: 'fruit_set', price: 250}， 则 参数 item 的 数据 


将 会 是 {name: 'fruit_set', price: 250} 。 


号 


{ 
with (item) 
message = `${name}'s price is ${price} dollars now。 ; 


return message ; 
} 


function display02 ({name, price}) 

对 于 此 语法 而 言 , 车 传 入 的 数据 是 对 象 实例 {name: 'fruit_set', price: 250}, 则 特殊 格式 的 参数 列 
{name，price} 会 对 应 到 对 象 实例 fname: 'fruit_set，price: 250}， 使 得 参数 name 的 初始 数据 为 
'fruit_set'、 参 数 price 的 初始 数据 为 250。 

{ 


message = `${name}'s price is ${price} dollars now。  ; 


return message ; 


} 


function display03({name: n, price: p}) 

对 于 此 语法 而 言 , 车 传 入 的 数据 是 对 象 实例 {name: 'fruit_set', price: 250}, 则 特殊 格式 的 参数 列 
{name: n, price: p} 依 然 会 对 应 到 对 象 实例 {fname: 'fruit_set, price: 250}， 使 得 参数 n 的 初始 数据 为 
"fruit set、 参 数 p 的 初始 数据 为 250。 

{ 


message =“S$fn}j's Price is ${p} dollars now.。 ; 


return message ; 


} 


console.1og (display01 (item01)) ; 
console.log(display02 (item01)) ; 
console.log(display03 (item01)) ; 


这 3 个 语句 分 别 调用 了 不 同 的 函数 ， 但 均 将 变量 item01 的 对 象 实例 name: 'fruit_set', price: 
250}, 传 入 而 作为 各 个 参数 的 数据 , 进而 分 别 显示 相同 的 信息 【fruit_set's price is 250 dollars now. 】。 


以 典 放 
Var item02 = ['bread set', 120] ; 
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此 语句 声明 了 初始 数据 为 数组 实例 [bread_set, 120] 的 变量 item02。 

function display04([name，Price]) 

对 于 此 语法 而 言 ， 若 传 入 的 数据 是 数组 实例 ["bread_set，120]， 则 参数 name 和 price 的 数据 分 
别 为 字符 串 'bread_set 和 整数 值 120。 

4. 参数 的 扩展 配对 

参数 的 扩展 配对 (spreading match) ， 是 指 在 特定 函数 的 参数 列 的 定义 语法 中 ， 存 在 扩展 运算 
符 和 特定 参数 名 称 。 例 如 ， 函 数 的 定义 语法 user_cart(id, name, .… items) 中 的 【... items】。 

在 此 ， 若 【user_cart('Alex'，'USA-TX-21532'，['Red apple，3]，['"Durian'，5]，['Grapefruit，13]， 
["Watermelon', 2])】 被 调用 ， 则 其 参数 id 的 数据 为 字符 串 'Alex'， 其 参数 name 的 数据 为 字符 串 
'USA-TX-21532', 而 参数 items 的 数据 将 会 是 由 3 个 一 维 数 组 所 构成 的 二 维 数组 实例 [['Red apple', 3]， 
[Durian', 5], [Grapefruit, 13], ["Watermelon', 2]]。 关于 参数 的 扩展 配对 的 综合 运用 , 可 参考 如 下 示例 。 


【5-1-3-e4-parameter-spreading-matches.js】 


function user_cart (id，name，..。 items) 


{ 
let title = ‘User ${name} whose id is ${id}. ; 


console.log (title) ; 
console.log (items) ; 
console.10g('') ; 


for (let i = 0; i < items.length; i++) 


{ 
let item message = ‘item ${i}: Product = ${items[i][0]}, Amount = ${items[i] [1]}. ; 


console.log(item message) ; 
} 
} 


user cart('Alex', 'USA-TX-21532', ['Red apple', 3], ['Durian', 5], ['Grapefruit', 13], 
['Watermelon', 2]) ; 


【相关 说 明 】 


function user cart (id, name, ... items) 


let title = ‘User ${name} whose id is ${id}. ; 
console.log (title) ; 

此 语句 显示 出 【User USA-TX-21532 whose id is Alex】 的 信息 。 
console.1og (items) ; 

此 语句 显示 出 [['Red apple', 3], ['Durian', 5], [Grapefruit, 13], ["Watermelon', 2]] 的 信息 。 
console.10og('') ; 


for (let i = 0; i < items.length; i++) 
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{ 
let ;item message = ‘item ${i}: Product = ${items[i][0]}, Amount = $fitems[i]l[1]} ”7 


console.1og(item message) ; 
在 上 述 for 循环 语句 的 4 次 迭代 中 ， 会 显示 出 如 下 信息 : 
item 0: Product = Red apple, Amount = 3 


item 1: Product = Durian, Amount = 5 
item 2: Product = Grapefruit, Amount= 13 


item 3: Product = Watermelon, Amount = 2 


上 述 源 代码 定义 了 带 有 3 个 参数 的 函数 user_cart)。 其 中 ， 最 右 侧 的 参数 ， 被 冠 上 扩展 运算 符 
【.…】。 若 调用 前 述 函数 时 ， 被 传 入 的 数据 个 数 超过 两 个 ， 则 第 3 个 到 最 后 1 个 数据 ， 均 可 被 整合 
成 为 参数 items 的 数组 实例 中 的 各 元 素 。 在 此 ， 第 3 个 数据 [Red apple', 3]、 第 4 个 数据 [Durian', 5]、 
第 5 个 数据 "Grapefruit, 13]、 第 6 个 数据 ["Watermelon', 2], 均 会 被 整合 至 参数 items 的 数组 实例 [['Red 
apple', 3], [Durian', 5], [Grapefruit, 13], ["Watermelon', 2]] 中 。 


user cart('Alex', 'USA-TX-21532', ['Red apple', 3], ['Durian', 5], ['Grapefruit', 13], 
['Watermelon', 2]) ; 


此 语句 调用 了 函数 user_cart()， 并 传 入 一 连 串 的 数据 。 


5.1.4 主体 


在 函数 的 定义 语法 中 ， 大 括号 里 的 块 范围 ， 是 函数 的 主体 (body) 。 在 函数 的 主体 里 : 
ee 可 声明 局 部 变量 。 

@ 可 引用 内 置 但 只 读 (read only ) 的 局 部 变量 this。 

@@ 可 引用 内 置 且 含 有 被 传 入 的 各 数据 的 局 部 变量 arguments。 

@ 可 通过 retum 语句 ， 返 回 特定 数据 。 

关于 函数 之 主体 的 综合 运用 ， 可 参考 如 下 示例 。 

【5-1-4-function-bodies.js】 


Var Value01 = -1, value02 = -1 


var result = 0 


function choice(n，r，h) 
{ 
Switch (n) 
{ 
case 1: 
result = Math.PI * 1r ** 2) 3 
break ; 
case 2: 
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【相关 说 明 】 
varvavel-lvabel: 
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此 语句 声明 了 初始 数值 均 为 -1 的 变量 value01 与 value02。 


此 语句 声明 了 初始 数值 为 0 的 变量 result。 


此 语法 根据 变量 n 的 数值 ， 决 定 变量 result 的 数值 ， 是 代表 圆 面 积 、 球 体积 ， 还 是 圆柱 体积 。 


此 语法 显示 出 变量 result 的 精确 到 第 2 个 小 数位 的 数值 。 


此 语法 返回 变量 result 的 精确 到 第 2 个 小 数位 的 数值 。 


此 语法 调用 了 函数 choice(1, 10)， 以 计算 并 显示 出 半径 为 10 的 圆 面 积 。 
[SS :> | 
此 语法 调用 了 函数 choice(2, 10)， 以 计算 并 显示 出 半径 为 10 的 球体 积 。 
SS | 
此 语法 调用 了 函数 choice(3, 10, 15)， 以 计算 并 显示 出 半径 为 10、 高 度 为 15 的 圆柱 体积 。 
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调用 函数 another_choice0 时 : 


@ ”车 未 冠 上 关键 字 new， 例 如 【var pointer = another_choice(2, 10, 20, 30) :】 则 【this.value】 的 
语法 ， 会 使 得 value 突然 变 成 全 局 变量 。 
@ ” 若 冠 上 关键 字 new， 例 如 【var pointer = newanother_choice(2, 10, 20, 30) ;】 则 【this.value】 
的 语法 ， 会 使 得 value 成 为 【函数 another_choice0) 默 认 对 应 的 新 对 象 实例 】 中 的 属性 。 
Switch (n) 
{ 
case 1: 
this.value = 1 工 * 由 了 
break ; 
case 2: 
this.value =1*w*h; 
break ; 
case 3: 
Th 
break ; 
} 
此 语法 根据 变量 n 的 数值 ， 决 定 this.value 的 数值 ,是 代表 和 托 形 面积 、 方 体积 还 是 方 体 表 面积 。 
console.log (this.value) ; 
} 


var pointer = new another choice(2, 10, 20, 30) ; 

在 此 语法 中 ,调用 函数 another_choice0 时 ， 冠 上 了 关键 字 new， 所 以 变量 pointer 的 初始 数据 ， 
是 函数 another_choice0 默 认 对 应 的 新 对 象 实例 【another_choice {value: 6000} 】。 

console.log('\n\n') ; 

console.log (Pointer) ; 

此 语句 显示 出 【another_choice {value: 6000} 】 的 信息 。 

console.log (pointer.value) ; 


此 语句 显示 出 pointer.value 的 数值 6000。 


5.1.5 “返回 数据 与 void 关键 字 (ES6) 


特定 函数 被 调用 之 后 ， 当 执行 到 函数 主体 内 的 return 语句 时 ， 便 代表 函数 此 次 调用 任务 结束 ， 
并 返回 特定 数据 。 此 外 ， 配 合 void 关键 字 ， 可 使 得 匿名 函数 的 定义 立即 被 调用 。 关 于 函数 的 返 区 
数据 和 void 关键 字 的 运用 ， 可 参考 如 下 示例 。 

【5-1-5-return-data-and-keyword-void.js】 


let returned = -1 > 


function a number(start, end) 
{ 
let number ; 
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【相关 说 明 】 


在 此 ， 若 变量 end 的 数值 ， 小 于 或 等 于 变量 start 的 数值 ， 则 执行 语句 【return ;】 以 完成 函数 
的 调用 任务 ， 并 返回 原始 常量 undefined。 


mamber = start + parseTnt (Mathrandon() * (end - start); 
此 语句 将 【变量 start 的 数值 】 到 【变量 end 的 数值 】 之 间 的 随机 整数 值 ， 赋 给 变量 number。 


return namper 
在 此 ， 通 过 关键 字 return 开头 的 语句 ， 返 回 变量 number 的 数值 。 
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此 语句 将 函数 a_number(50, 100) 返 回 的 50 ~ 100 的 随机 整数 值 ， 赋 给 变量 retumed。 


console.log (returned) ; 


returned = a number(100, 10) ; 


此 语句 调用 函数 a_number(100, 10) 时 ， 其 第 一 个 参数 数值 100， 并 没有 小 于 或 等 于 其 第 2 个 参 
数 数值 10， 所 以 函数 a_number(100, 10) 返 回 了 原始 常量 undefined， 并 赋 给 变量 returned。 


console.1og (returned) ; 
console.10g('') 


(function () 
{ 
console.log('Anomynous function 01 is executed.') ; 
} 
en 


此 特殊 语句 通过 3 对 小 括号 分 别 定义 没有 名 称 的 匿名 函数 ， 并 随即 调用 匿名 函数 。 


void function () 
{ 

console.1log('Rnomynous function 02 is executed.') ; 
RA 


此 特殊 语法 通过 关键 字 void 和 两 对 小 括号 ， 定 义 并 立即 调用 了 没有 名 称 的 匿名 函数 。 


5.1.6 ”定义 的 位 置 (ES6) 


函数 的 定义 语法 ， 类 似 于 变量 的 声明 语法 ， 可 被 放置 于 : 

”全 局 (global ) 的 位 置 : 也 就 是 源 代码 第 一 层级 的 位 置 。 

@ 局 部 (local) 的 位 置 : 也 就 是 特定 函数 的 主体 内 部 的 位 置 。 

@ 块 范围 里 的 位 置 : 在 特定 块 范围 内 部 , 通过 关键 字 let 开头 的 函数 表达 式 ( function expression )， 
可 定义 只 能 在 特定 块 范围 内 部 ， 被 调用 的 函数 。 

关于 函数 的 定义 位 置 的 综合 运用 ， 可 参考 如 下 示例 。 

【5-1-6-locations-of-function-definitions.js } 

gfunc() ; 

// global function 

function gfunc() 


{ 
lfunc() ; 


// local function 
function lfunc() 
{ 
console.log('Local function is executed.') ; 
} 


lfunc() ; 
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【相关 说 明 】 


此 语句 调用 了 被 定义 在 下 方 的 全 局 函数 gfunc()。 


此 语句 调用 了 被 定义 在 下 方 的 函数 IfuncO。 


函数 lfunc() 被 定义 在 函数 gfunc0 里 ， 成 为 块 范围 的 函数 ， 因 此 在 函数 gfunc() 之 外 的 位 置 ， 均 
无 法 调用 函数 lfunc()。 


此 语句 调用 了 被 定义 在 上 方 的 函数 lfunc0。 


函数 gfunc0 虽 然 被 定义 在 被 调用 的 位 置 之 后 ， 但 是 在 JavaScript 语法 中 ， 是 可 行 的 。 
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// Error occurs if bfunc() is executed here. 


// bfunc() ; 


这 里 无 法 调用 函数 bfunc()， 所 以 将 此 语句 ， 放 到 注释 里 。 


{ 


// function in a block 
let bfunc = function () 


{ 


console.1og('Blocking function is executed.') ; 


} 


函数 bfunc0 是 通过 关键 字 let 开头 的 函数 表达 式 (function expression) ， 被 定义 在 上 层 大 括号 


量 


bfunc() ; 


进而 成 为 块 范围 的 函数 。 因 此 ， 在 上 层 大 括号 之 外 的 位 置 ， 无 法 调用 到 函数 bfunc()。 


此 语句 调用 了 被 定义 在 上 方 的 函数 bfunc()。 


} 


// Error also occurs if bfunc() is invoked here. 


// bfunc() ; 


这 里 也 无 法 调用 函数 bfunc()。 


gfunc() ; 


此 语句 调用 了 被 定义 在 上 方 的 全 局 函数 gfunc()。 


// Error occurs if lfunc() is executed here. 


// lfunc() ; 


这 里 亦 无 法 调用 函数 lfunc()。 


5.1.7 ”函数 的 调用 形式 (ES6) 


特定 函数 的 定义 语法 ， 


原则 上 六 


fF 不 会 一 六 


F 使 得 这 个 函数 被 调用 (invoke / call) ; 必须 有 额外 


的 调用 语法 才 行 。 函 数 的 调用 形式 ， 大 致 可 分 为 以 下 几 种 : 


常态 (normally ) 调用 。 

定期 (periodically ) 调用 。 
递归 (recursively ) 调用 。 
定义 后 立即 (immediately ) 调用 。 


关于 函数 的 调用 形式 的 理解 ， 可 参考 如 下 示例 。 


【5-1-7-function-invocations.js】 


let count = 0 : 


function func01() 
{ 
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【相关 说 明 】 


此 语句 声明 了 初始 数值 为 0 的 变量 count。 


此 语法 定义 了 函数 func01()。 
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此 语句 调用 了 函数 func01() ; 


在 函数 func020 的 定义 语法 里 ，if .else 语句 中 的 【func02(n-1)】， 递 归 调 用 了 函数 func020 本 
身 ， 这 样 的 函数 可 称 为 递归 函数 (recursive function) 。 


此 语句 声明 了 变量 result， 其 初始 数值 为 函数 func02(10) 的 返回 值 。 


此 语法 定义 了 函数 func03()。 
Setrimeout (func03，1000) ;0 


此 语句 使 得 函数 func03() 在 延迟 1 秒 〈1000 毫秒 ) 之 后 ， 才 间接 被 调用 。 


此 语句 则 使 得 函数 func030 每 阳 2 秒 2000 毫秒 ) ， 就 被 间接 调用 1 次 。 


此 语法 是 一 种 【立即 可 调用 的 函数 表达 式 (IIFE, immediately invokable function expression)】， 
可 用 来 定义 并 立即 调用 其 中 的 匿名 函数 。。 


此 语法 定义 并 立即 调用 了 其 中 的 匿名 函数 。 
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52 生成 器 


在 JavaScript 语言 里 ， 生 成 器 (generator) 是 可 被 迭代 的 对 象 实例 〈object instance) ， 并 且 可 
由 生成 器 函数 〈generator function) 加 以 动态 产生 。 


5.2.1 和 迭代 器 协议 与 生成 器 (ES6) 


在 所 谓 的 迭代 器 协议 (iterator protocol) 里 ,描述 了 【作为 迭代 器 (iterator) 的 对 象 实例 (instance)， 
必须 支持 动态 产生 可 被 迭代 (iterable》 的 多 个 元 素 】 的 集合 。 

在 JavaScript 语言 中 ， 数 组 (array) 、 字 符 串 (string) 、 集 合 (set) 与 地 图 (map)〉 类 型 的 实 
例 ， 均 被 默认 为 可 迭代 的 。 此 外 ， 通 过 自 定义 的 生成 器 函数 〈generator function) ， 也 可 动态 产生 
可 被 迭代 的 生成 器 〈generator) 。 关 于 人 迭代 器 协议 与 生成 器 的 理解 和 运用 ， 可 参考 如 下 示例 。 


【5-2-1-iterator-protocol-and-generator.js】 


let iterator01 = 
{ 
* [Symbol .iterator] () 
{ 
for(let 1 = 07 1 < 10; i++) 
{ 
yield parseInt (10 * (i + Math.random())) ; 
} 
} 
} 


for (let n of iterator01) 
{ 
console.log(n) ; 


} 
【相关 说 明 】 


let iterator01 = 

{ 
* [Symbol .iterator] () 
{ 


for(let i = 0; i < 10; i++) 
{ 
yield parseInt (10 * (i + Math.random())) ; 


通过 关键 字 yield， 此 for 循环 语句 在 每 次 迭代 时 ， 均 会 将 表达 式 【parseInt(10 * (i + 
Math.random()))】 的 结果 值 ， 产 生 (yield) 至 【这 个 生成 器 最 终 返回 】 的 数组 实例 中 。 
} 
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上 述 语 法 依据 和 迭代 器 协议 的 规范 , 定义 了 作为 生成 器 的 变量 iterator01。 其 中 , 【Symbol.iterator】 
可 被 视 为 【在 特定 对 象 实例 (object instance ) 中 ,作为 内 置 的 迭代 器 (iterator) 】 的 索引 数据 (index 
data) ， 进 而 使 得 【*[Symbol.iterator]0 { .… }】 定 义 了 新 的 迭代 器 函数 。 

为 了 让 特定 对 象 实例 具有 可 被 迭代 的 生成 器 特征 ， 必 须 在 这 个 对 象 实例 的 定义 语法 中 ， 再 加 
上 前 述 的 迭代 器 函数 的 描述 。 

} 

上 述 语法 将 【等 号 右 侧 内 含 迭 代 器 函数 】 的 对 象 实例 ， 赋 给 作为 生成 器 的 变量 iterator01。 


for (let n of iterator01) 
{ 

console.log(n) ; 

} 


在 此 ,通过 带 有 语法 【... of 作为 生成 器 的 变量 名 称 】 的 for 循环 语句 ， 可 让 其 大 括号 里 的 源 代 
码 片段 ， 被 和 迭 代数 次 。 


5.2.2 ”生成 器 函数 的 定义 和 用 法 (ES6) 


通过 关键 字 function 衔接 星 号 【*】， 可 用 来 定义 生成 器 函数 (generator function) ， 以 动态 返 
回 可 被 迭代 (iterable) 、 可 用 于 扩展 〈spread) 与 可 用 于 配对 (match) 的 生成 器 〈generator) 。 关 
于 生成 器 函数 的 定义 和 用 法 的 综合 运用 ， 可 参考 如 下 示例 。 


【5-2-2-generator-function-definitions-and-matches.js】 


function * iterator02 (end) 
{ 
for(let i = 0; i < end; i++) 
{ 
yield parseInt(10 * (i + Math.random())) ; 
} 
} 


for (let n of iterator02(10)) 
{ 
console.log(n) ; 


} 
let numbers = [ ... iterator02(20) ] ; 
let [a, b, c, ... others] = iterator02(8) ; 


console.log (numbers) ; 
console.log(a, b, c); 
console.log(others) ; 


【相关 说 明 】 


function * iterator02 (end) 
{ 
for(let i = 0; i < end; i++) 
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{ 
yield parseInt (10 * (i + Math.random())) ; 
} 
} 


此 语法 是 生成 器 函数 的 标准 定义 形式 。 


for (let n of iterator02(10)) 
{ 

console.log(n) ; 

} 


通过 带 有 【.… of 生成 器 函数 名 称 ()】 的 for 循环 语句 ， 也 可 达成 和 欠 代 的 效果 。 

let numbers = [ ... iterator02(20) ] ; 

此 语句 声明 了 初始 数据 为 新 数组 实例 的 变量 numbers。 在 此 ， 扩 展 运 算 符 【.….】 衔 接生 成 器 函 
数 iterator02(20) 的 调用 语法 ， 可 将 生成 器 函数 iterator02(20) 的 返回 数据 ， 进 一 步 扩 展 成 为 新 数组 实 
例 中 的 各 元 素 。 

let [a, b, c¢, ... others] = iterator02(8) ; 

若 生 成 器 函数 iterator02(8) 返 回 了 数组 [5, 16, 28, 36, 47, 54, 66, 71]， 则 此 语句 就 相当 于 声明 了 
初始 数值 为 5 的 变量 a、 初始 数值 为 16 的 变量 b、 初 始 数值 为 28 的 变量 ce， 以 及 初始 数据 为 数组 
实例 [36, 47, 54, 66, 71] 的 变量 others。 


5.3 ”搭配 Promise 对 象 


Promise 具有 承诺 的 含义 ， 而 Promise 对 象 可 用 来 描述 特定 承诺 ， 是 否 已 经 成 功 (success) 完 
成 或 者 以 失败 〈failure) 收场 ， 进 而 分 别 进行 后 续 的 处 置 。 


5.3.1 ”Promise 对 象 的 用 法 (ES6、ES9) 


欲 捕获 Promise 对 象 实例 发 生 的 异常 错误 ， 可 通过 内 置 的 函数 catch0， 间 接 调用 进行 错误 处 理 
的 函数 。 无 论 有 无 发 生 异常 错误 ， 皆 可 通过 内 置 的 函数 finally()， 间 接 调 用 进行 收尾 处 理 的 函数 。 
其 中 ， 传 入 函数 catch0 或 finally0 的 单一 参数 ， 可 以 是 【匿名 函数 的 定义 语法 】 或 者 【 自 定 义 函 数 
的 名 称 】。 其 语法 大 致 为 : 

@ ”作为 Promise 对 象 实例 的 变量 名 称 .catch( 匿 名 函数 的 定义 语法 或 者 自 定义 函数 的 名 称 ) ; 

@ ”作为 Promise 对 象 实例 的 变量 名 称 .finally( 匿 名 函数 的 定义 语法 或 者 自 定 义 函 数 的 名 称 ) ; 

欲 加 以 处 理 Promise 对 象 实例 所 解决 承诺 和 【拒绝 承诺 的 后 续 动作 , 可 通过 内 置 函 数 then()， 
间接 调用 不 同 的 两 个 函数 。 其 语法 大 致 为 : 

@ 作为 Promise 对 象 实例 的 变量 名 称 .then( 解 决 承诺 之 后 加 以 调用 的 匿名 函数 的 定义 语法 或 者 函 

数 名 称 ， 拒 绝 承 诺 之 后 加 以 调用 的 匿名 函数 的 定义 语法 或 者 函数 名 称 ) ; 
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运用 Promise 对 象 的 机 制 ， 需 编写 如 下 各 个 部 分 的 源 代码 片段 : 
(1) 定义 启动 承诺 的 函数 ， 例 如 function promise_executor() { ... } 。 
(2) 调用 内 置 的 Promise 对 象 的 构造 函数 Promise(), 例如 Promise(promise_executor)， 并 返 加 
Promise 对 象 实例 。 
(3) 将 Promise 对 象 实例 ， 赋 给 特定 变量 ， 例 如 【message_promise = new Promise(promise 
executor) ;】。 


(4) 分 别 定义 【解决 承诺 之 后 】 和 【拒绝 承诺 之 后 】 的 处 置 函数 ， 例 如 : 


® function positive(message) {...} 


® functionnegative(message) {...} 


(5) 调用 Promise 对 象 实例 所 对 应 的 内 置 函 数 then0)， 例 如 【message_promise.then(positive， 
negative) ;】。 

关于 Promise 对 象 的 细部 运用 ， 可 参考 如 下 示例 。 

【5-3-1-Promise-usage.js】 

let textfield = document .createElement ('input') ; 


textfield.id = 't01' ; 


textfield.style.fontSize = '2em' ; 
textfield.style.paddingLeft = 'S5px' ; 
textfield.style.color = 'RoyalBlue' ; 


document .body.innerHTML += '<p></p>' ; 
document .body .appendChild (textfield) ; 
let message box = document.createElement('span') ; 


message box.id = 'mbox' } 
message box.style.fontSize = '1.5em' ; 
message box.style.marginLeft = '15px' ; 


document .body .appendChild (message box) ; 
textfield.focus() ; 


WMAA 
let message promise ; 


function promise executor (resolve, reject) 
{ 

if (t01.value != '') 

{ 

resolve('at most 12 characters.') ; 

} 

else 

{ 
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reject('you have only 5 seconds to input!') ; 
} 
} 


function Positive (message) 

{ 
mbox .style.color = 'ForestGreen' ; 
mbox.innerHTML = message ; 

} 


function negative (message) 
{ 
mbox.style.color = 'Pink' ; 
mbox.innerHTML = message ; 
} 


function check error() 
{ 
message promise = new Promise (promise executor) ; 


message promise.then (positive, negative) ; 
} 


setTimeout (check error, 5000) ; 


【相关 说 明 】 

let textfield = document .createElement ('input') ; 

此 语句 声明 了 变量 textfield， 其 初始 数据 为 网 页 上 新 的 input 元 素 实例 。 

textfield.id = 't01' ; 

此 语句 设置 了 新 input 元 素 实例 的 属性 id 及 其 数据 字符 串 t01。 在 此 ， 这 个 input 元素 实例 的 
属性 id 的 数据 字符 串 为 01', 即 是 意味 着 这 个 input 元 素 实 例 的 身份 识别 码 为 101, 可 供 后 续 源 代码 
片段 加 以 访问 。 

textfield.style.fontSize = "2em' ; 


textfield.style.paddingLeft = '5px' ; 
textfield.style.color = 'RoyalBlue' ; 


这 3 个 语句 设置 了 新 input 元 素 实例 的 属性 style 中 的 子 属性 fontSize、paddingLeft、color。 设 
置 特定 元 素 实例 的 属性 style,， 会 驱使 浏览 器 变更 这 个 元 素 实例 的 外 观 , 例如 字体 大 小 (fontSize〉、 
左 侧 边 界 内 的 填充 距离 (paddingLeft) 与 字体 颜色 (color) 。 

document .body . innerHTML += '<p></p>' ; 

此 语句 使 得 无 任何 子 节点 的 p 元 素 实 例 ， 被 新 增 至 body 元 素 实例 中 。 

document .body.appendchild (textfield) ; 

此 语句 将 变量 textfield 的 新 的 input 元 素 实例 ， 新 增 至 body 元 素 实例 中 。 

let message_box = document.createElement("span') ; 


此 语句 声明 了 变量 message_box， 其 初始 数据 为 网 页 上 新 的 span 元 素 实例 。 
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message box.id = "mbox' ; 
message box.style.fontSize = '1.5em' ; 
message_ box.style.marginLeft = '15px' ; 


这 两 个 语句 设置 了 【在 变量 message_box 的 新 span 元 素 实例 中 ,其 属性 style ] 的 子 属 性 fontSize、 
marginLeft， 以 改变 这 个 元 素 实 例 的 字体 大 小 〈fontSize) 和 左 侧 边界 外 的 间隔 距离 (marginLeft) 。 

document .body .appendCchild (message box) ; 

此 语句 将 变量 message_box 的 新 的 span 元 素 实例 ， 新 增 至 body 元 素 实例 中 。 

textfield.focus() ; 

此 语句 使 得 变量 textfield 的 input 元 素 实 例 , 成 为 网 页 上 的 焦点 (focus)。 成 为 网 页 上 的 焦点 ， 
是 指 特定 input 元 素 实例 ， 处 于 选中 状态 ， 以 便 在 无 须 自行 单 击 这 个 元 素 实例 的 情况 下 ， 用 户 可 以 
立即 输入 文本 。 

let message promise ; 


此 语句 声明 了 未 设置 初始 数据 的 全 局 变量 message_promise。 


function promise executor (resolve, reject) 
{ 

if (t01.value != '') 

{ 


resolve('at most 12 characters.') ; 


此 语句 调用 了 内 置 的 局 部 函数 resolve()， 并 将 字符 串 'at most 12 characters.' 作 为 其 参数 数据 。 
else 


reject('you have only 5 seconds to input!') ; 


此 语句 调用 了 内 置 的 局 部 函数 reject()， 并 将 字符 串 'you have only 5 seconds to input!' 作 为 其 参 
数 数据 。 


} 
} 


上 述 语法 定义 了 具有 两 个 参数 的 函数 promise_executor()， 以 用 来 启动 承诺 。 被 传 入 的 两 个 参 
数 数据 ， 即 是 【解决 承诺 之 后 】 和 【拒绝 承诺 之 后 】 的 处 置 函数 的 名 称 。 


function positive(message) 

{ 
mbox.style.color = 'ForestGreen' ; 
mbox.innerHTML = message ; 

} 


此 语法 定义 了 【解决 承诺 之 后 】 的 处 置 函 数 positiveO。 


function negative (message) 
{ 
mbox.style.color = 'Pink' ; 
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mbox .innerHTML = message ; 
} 


此 语法 则 定义 了 【拒绝 承诺 之 后 】 的 处 置 函 数 negative()。 


function check error() 
{ 


message promise = new Promise (promise executor) ; 

此 语句 在 等 号 右 侧 ， 描 述 了 一 个 Promise 对 象 实例 ， 并 被 传 入 用 来 启动 承诺 的 函数 名 称 
promise_executor， 再 赋 给 全 局 变量 message_promise。 也 因此 ， 这 个 Promise 对 象 实例 ， 间 接 内 含 
了 用 来 启动 承诺 的 函数 promise_executor()。 

message_promise.then (positive, negative) ; 

在 特定 承诺 被 解决 或 拒绝 时 ， 此 语句 可 用 来 捕捉 所 发 生 的 异常 错误 。 特 定 承诺 被 解决 时 ， 调 
用 函数 positive0; 特定 承诺 被 拒绝 时 ， 则 调用 函数 negative()。 

} 

上 述 语 法 定义 了 函数 check_error()， 以 创建 一 个 全 新 的 Promise 对 象 实例 ， 并 间接 调用 了 函数 


promise_executor()。 


setTimeout (check error, 5000) ; 


此 语句 使 得 函数 check_error0， 在 5 秒 〈5000 毫秒 ) 之 后 ， 被 调用 1 次 。 


5.3.2 ”聚集 多 个 Promise 对 象 (ES6) 


在 一 些 场合 当中 ， 整 个 承诺 可 分 割 为 数 个 细部 承诺 。 而 且 ， 解 决 或 拒绝 每 个 细部 承诺 ， 最 终 
势必 会 影响 到 ， 是 否 解决 了 整个 承诺 。 此 时 ， 则 可 考虑 运用 Promise 对 象 的 内 置 函 数 al0， 来 聚集 
多 个 细部 承诺 对 应 的 个 别 Promise 对 象 实例 ， 以 实现 前 述 一 连 串 的 机 制 。 其 实现 的 步骤 大 致 如 下 : 

(1) 声明 一 个 空 Cempty) 的 数组 实例 ， 例 如 【1let promise_array = [] ;】， 以 放 入 内 含 处 置 各 
细部 承诺 的 各 个 Promise 对 象 实例 。 
(2) 利用 5.3.1 节 示 例 中 的 方式 , 在 上 述 空 数组 实例 中 ， 放 入 代表 各 细部 承诺 的 Promise 对 象 
实例 。 
(3) 定义 用 来 处 置 整个 承诺 被 解决 之 后 和 细部 承诺 被 拒绝 之 后 的 处 置 函 数 ， 例 如 : 
® function final success(value or list) {...} 


® function final failure(value_or list) {...} 


(4) 调用 【聚集 所 有 细部 承诺 】 的 函数 Promise.all()， 例 如 【Promise.all(promise_array)】。 
(5) 通过 整个 承诺 对 应 的 Promise 对 象 实例 ， 进 一 步调 用 内 置 的 函数 then()， 例 如 


【Promise.all(promise_array). then(final_success, final_failure)】。 


关于 聚集 多 个 Promise 对 象 的 综合 运用 ， 可 参考 如 下 示例 。 
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【5-3-2-Promise-aggregation.js】 
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【相关 说 明 】 


此 语句 使 得 在 网 页 上 body 元 素 实 例 内 ， 被 新 增 一 个 空 的 p 元 素 实 例 ， 以 便 让 【选择 文件 】 按 
钮 与 即将 被 新 增 的 input 元素 实例 之 间 ， 存 在 着 间隔 距离 。 


此 语句 声明 了 没有 初始 数据 的 变量 textfield。 
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textfield = document .createElement ('input') ; 
此 语句 将 新 的 input 元 素 实例 ， 赋 给 变量 textfield。 
textfield.id = 't0' + ; 
此 语句 设置 了 各 个 input 元 素 实例 的 属性 id 的 数据 ， 分 别 成 为 字符 串 "t01'"、't02'、't03' 与 (04'。 
这 也 就 意味 着 ， 前 述 各 个 input 元 素 实例 的 身份 识别 码 ， 分 别 成 为 {01、t02、103 与 t04。 
textfield.style.width = '80px' ; 
此 语句 设置 了 input 元 素 实例 被 呈现 在 网 页 上 的 宽度 ， 成 为 80 像素 。 


textfield.style.fontSize = '2em' ; 

textfield.style.paddingLeft = '5px' ; 
textfield.style.marginRight = 'S5px' ; 
textfield.style.color = 'RoyalBlue' ; 


这 4 个 语句 变更 了 新 input 元 素 实 例 显示 在 网 页 上 的 外 观 参 数 。 

document .body.appendChild (textfield) ; 
通过 此 语句 ， 为 网 页 上 的 body 元 素 实 例 ， 新 增 变 量 textfield 所 代表 的 新 input 元 素 实例 。 
} 


let message box = document.createElement('span') ; 
通过 此 语句 ， 设 置 变量 message_box 的 数据 ， 成 为 新 的 span 元 素 实 例 。 
message_box.id = "mbox' ; 


通过 此 语句 ， 在 变量 message_box 所 代表 的 新 span 元 素 实例 中 ， 设 置 其 属性 id 的 数据 为 字符 
串 'mbox'。 


message box.style.fontSize = '1.5em' ; 
message_box.style.marginLeft = '15px' ; 


通过 这 两 个 语句 ， 设 置 新 span 元 素 实例 显示 在 网 页 上 的 外 观 参数 。 
document .body .appendCchild (message box) ; 
通过 此 语句 ， 为 网 页 上 的 body 元 素 实例 ， 新 增 变量 message_box 所 代表 的 新 span 元 素 实 例 。 


t01.focus() ; 


let promise array = [] ; 

此 语句 声明 了 初始 数据 为 空 数组 实例 的 变量 promise_array， 并 且 准 备用 来 存放 4 个 Promise 

let filled = 0, blank = 0; 

此 语句 声明 了 初始 数值 均 为 0 的 变量 filled 与 blank。 变 量 filled 用 来 记录 已 填 入 文本 的 input 
元 素 实 例 的 个 数 ， 变 量 blank 则 是 用 来 记录 尚未 填 入 文本 的 input 元 素 实例 的 个 数 。 
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let id no; 


此 语句 声明 了 变量 id_no， 并 且 准 备用 来 存放 特定 input 元 素 实例 的 属性 id 对 应 的 编号 值 ， 比 
如 整数 值 1、2、3 或 4。 


function promise executor (resolve, reject) 


{ 


let ref = document .getElementById('t0' + id no) ; 


此 语句 声明 了 局 部 变量 ref， 其 初始 数据 为 属性 id 是 t01、t02、t03 或 t04 的 其 中 一 个 input 元 
素 实例 ， 即 是 用 来 代表 特定 input 元 素 实例 。 


console.log (ref) ; 


if (ref.value != '') 


{ 


ref.style.borderColor = 'Green' }; 
此 语句 设置 了 特定 input 元 素 实例 的 边框 颜色 ， 成 为 绿色 。 
resolve() ; 


此 语句 调用 了 内 置 的 局 部 函数 resolve()， 等 同 于 间接 调用 了 函数 positive()。 


else 


ref.style.borderColor = 'Red' ; 
此 语句 设置 了 特定 input 元 素 实 例 的 边框 颜色 ， 成 为 红色 。 
reject() ; 
此 语句 调用 了 内 置 的 局 部 函数 reject()， 等 同 于 间接 调用 了 函数 negative()。 
} 
上 述 语 法 定义 了 具有 两 个 参数 的 函数 promise_executor0, 主要 用 来 启动 承诺 。 在 语法 【function 
promise_executor(resolve, reject)】 中 ， 参 数 resolve 是 对 应 到 【解决 承诺 之 后 】 的 处 置 函 数 的 名 称 ， 
而 参数 reject 则 是 对 应 到 【拒绝 承诺 之 后 】 的 处 置 函数 的 名 称 。 


function check error() 

{ 
for (id no=1; idno<5; id no++) 
{ 


promise array[lid no - 1] = new Promise(promise executor) ; 
此 语句 在 等 号 右 侧 ， 描 述 了 通过 关键 字 new， 以 及 传 入 【用 来 启动 承诺 】 的 函数 名 称 
promise_executor， 到 Promise 对 象 实例 的 构造 函数 Promise() 里 ,以 动态 产生 一 个 新 的 Promise 对 象 
实例 。 再 将 这 个 Promise 对 象 实例 ， 设 置 成 为 全 局 变量 promise_array 的 数组 实例 中 的 元 素 。 
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promise array[id no - 1] .then (Positive，negative) ; 
此 语句 用 来 在 处 置 解决 承诺 或 拒绝 承诺 时 ， 捕 捉 所 发 生 的 异常 错误 。 处 置 解决 承诺 时 ， 调 用 
函数 positive(); 处 置 拒绝 承诺 时 ， 则 调用 函数 negative()。 
} 


Promise.all (promise array) .then(final success, final failure) ; 

此 语句 是 用 来 在 整个 承诺 被 解决 时 ， 或 者 细部 承诺 被 拒绝 时 ， 捕 捉 所 发 生 的 异常 错误 。 整 个 
承诺 被 解决 时 ， 调 用 函数 final_success(); 细部 承诺 被 拒绝 时 ， 则 调用 函数 final_failure()。 

} 

上 述 语法 定义 了 函数 check_error()， 以 创建 多 个 全 新 的 Promise 对 象 实例 ， 并 间接 调用 了 函数 
promise_executor()。 


function positive(value) 


{ 
filled++ 了 

变量 filled 是 用 来 记录 被 填 入 文本 的 input 元素 实例 的 个 数 。 此 语句 递增 了 变量 flled 的 数值 ， 
代表 已 被 填 入 文本 的 input 元 素 实例 的 个 数 ， 增 加 了 一 个 。 

} 

上 述 语法 定义 了 细部 承诺 被 解决 之 后 的 处 置 函 数 positive(), 以 计算 出 被 填 入 文本 的 input 元 素 
实例 的 个 数 。 因 为 在 本 示例 中 ， 调 用 函数 resolve0 时 ， 并 没有 传 入 任何 参数 数据 ， 所 以 函数 
positive(value) 的 参数 value 的 数据 ， 会 变 成 默认 的 原始 常量 undefined。 


function negative(value) 


{ 


blank++ } 
变量 blank 是 用 来 记录 并 未 被 填 入 文本 的 input 元 素 实 例 的 个 数 。 此 语句 递增 了 变量 blank 的 
数值 ， 代 表 逾 时 而 没有 被 填 入 文本 的 input 元 素 实例 的 个 数 ， 增 加 了 一 个 。 
} 
上 述 语 法 定义 了 细部 承诺 被 拒绝 之 后 的 处 置 函数 negative0， 以 计算 出 逾 时 而 没有 被 填 入 文本 
的 input 元 素 实例 的 个 数 。 因 为 在 本 示例 中 ， 调 用 函数 reject0 时 ， 并 没有 传 入 任何 参数 数据 ， 所 以 
函数 negative(value) 的 参数 value 的 数据 ， 会 变 成 默认 的 原始 常量 undefined。 


function final success (value or list) 
{ 
mbox.style.color = 'ForestGreen' ; 
mbox.innerHTML = 'All fields are filled.' ; 
} 


整个 承诺 被 解决 之 后 ,函数 final_success() 就 会 被 调用 , 并 被 传 入 由 【函数 resolve( 参 数 的 数据 ) 
与 reject( 参 数 的 数据 ) 返 回 的 各 个 数据 】 所 组 成 的 数组 实例 。 
因为 在 本 示例 中 ， 调 用 函数 resolve0 时 ， 并 没有 传 入 任何 参数 数据 ， 所 以 函数 
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final _ success(value_or lisb 的 参数 value_or list 的 数据 ， 会 变 成 内 含 4 个 默认 的 原始 常量 undefined 
的 数组 实例 [undefined, undefined, undefined, undefined] 。 


function final failure(value or list) 
{ 
mbox.style.color = 'Pink' ; 
mbox.innerHTML = “${blank} Blank field is/are left... }; 
} 
任何 一 个 细部 承诺 被 拒绝 时 ,函数 final_failure() 就 会 被 调用 .因为 在 本 示例 中 ,调用 函数 reject() 
时 ， 并 没有 传 入 任何 参数 数据 ; 所 以 函数 final_failure(value_or_list) 的 参数 value_or list 的 数据 ,会 
变 成 默认 的 原始 常量 undefined。 


setTimeout (check error, 4000) ; 


此 语句 使 得 函数 check_error0)， 在 4 秒 (4000 毫秒 ) 之 后 ， 被 调用 1 次 。 


5.3.3 ”异步 函数 与 等 待 表达 式 (ES8) 


在 JavaScript 语言 中 ， 可 通过 开头 的 关键 字 async， 衔 接 标 准 函 数 的 定义 语法 ， 描 述 【 可 返 [E 
内 含 特定 数据 的 Promise 对 象 实 例 】 的 异步 函数 (asynchronous function ) 。 

在 异步 函数 的 主体 语法 内 ， 可 放 入 关键 字 await 开头 的 等 待 表达 式 (await expression) ， 以 便 
执行 其 主体 内 的 源 代码 块 时 , 其 执行 动作 被 暂停 于 等 待 表达 式 的 所 在 位 置 , 一 直到 等 待 表达 式 被 评 
估 完 成 ， 并 返回 新 的 Promise 对 象 实例 为 止 。 关于 异步 函数 与 等 待 表达 式 的 综合 运用 ， 可 参考 如 下 
示例 。 


【5-3-3-async-function-and-await-expressions.js】 


function calc (value) 
{ 
function promise executor (resolve) 
{ 
// call resolve (value) after 2 seconds 
setTimeout (resolve, 2000, value + 100) ; 


} 


return new Promise (promise executor) ; 


} 


async function plus (value) 
{ 
let num01 
let num02 


= calc(20) ; 

= calc(30) ; 

// return after only 2 seconds. 

return value + await num01 + await num02 ; 


/x 
let num01 = await calc(20) ; 
let num02 = await calc(30) ; 
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【相关 说 明 】 


此 语句 是 用 来 模拟 ,调用 内 置 函 数 resolve() 的 时 间 差 ， 以 便 在 延迟 2 秒 2000 毫秒 ) 之 后 ， 
间接 调用 内 置 函 数 resolve(value + 100)。 


上 述 语法 定义 了 上 有 具有 单一 参数 的 函数 promise_executor(resolve)， 以 用 来 启动 承诺 。 在 此 ， 其 
参数 resolve 可 被 视 为 处 置 解 决 承诺 的 函数 resolve(。 


此 语句 设置 并 返回 了 一 个 新 的 Promise 对 象 实例 。 这 个 新 的 Promise 对 象 实例 ， 是 通过 关键 字 
new， 以 及 传 入 【用 来 启动 承诺 】 的 函数 名 称 promise_executor， 到 Promise 对 象 实例 的 构造 函数 
Promise() 里 ， 才 被 动态 产生 出 来 的 。 


上 述 语法 定义 了 函数 calc()。 


这 两 个 语句 均 在 其 等 号 右 侧 ,调用 函数 calc0, 并 分 别传 入 参数 数值 20 与 30, 进而 将 函数 calc( 参 
数 数值 ) 返 回 的 新 的 Promise 对 和 象 实例 ， 分 别 赋 给 变量 num01 及 num02。 
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在 此 语句 中 ， 表 达 式 【value + await num01 + await num02】 被 顺利 计算 出 来 之 前 ， 必 须 等 待 变 
量 num01 和 num02 的 数值 先 被 返回 才 行 。 

这 是 因为 ， 在 变量 num01 与 num02 的 左 侧 ， 均 被 冠 上 关键 字 await， 使 得 同时 被 延迟 2 秒 之 
后 ，num01 才 被 赋予 20 + 100 的 结果 值 120，num02 才 被 赋予 30 + 100 的 结果 值 130。 最 后 ， 表 达 
式 【value +awaitnum01 + awaitnum02】 才 被 计算 出 【10+ 120+130】 的 结果 值 260。 


/* 
let num01 = await calc(20) ; 
let num02 = await calc(30) ; 


// return after (2 + 2) seconds. 
return value + num01 + num02 ; 
入 


若 将 关键 字 await， 个 别 放置 在 调用 calc(20) 与 calc(30) 的 语法 左 侧 ， 则 因为 前 后 分 别 被 延迟 2 
所 以 总 共 会 延迟 4 秒 之 后 ，【return value + num01 + num02】 才 会 返回 整数 值 260。 

} 

上 述 语 法 通过 关键 字 async， 定 义 了 异步 〈asynchronous) 函数 plus()。 


function positive(value) 
{ 

console.1og('The value =', value) ; 
} 


此 语法 定义 了 特定 承诺 被 解决 之 后 的 处 置 函 数 positive()。 

let result = plus(10) »; 

此 语句 声明 了 初始 数据 为 【函数 plus(10) 的 返回 值 260】 的 变量 result。 

result.then (positive) ; 

在 特定 承诺 被 解决 ， 此 语句 可 用 来 捕捉 所 发 生 的 异常 错误 。 特定 承诺 被 解决 时 ， 会 调用 函数 


positive()。 


秒 


console.log('Promise object: ', result) ; 


此 语句 用 来 显示 出 内 含 最 终结 果 值 260 的 Promise 对 象 实例 的 内 容 。 
5.4 练 习 题 


1. 已 知 有 如 下 标准 函数 的 定义 语法 : 
function timing() 
{ 

console.1log (new Date () .toTimeString()) ; 
} 


试 改 写 上 述 函数 的 定义 语法 ， 成 为 等 价 的 函数 表达 式 。 
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2. 已 知 有 如 下 标准 函数 的 定义 语法 : 
function today () 
{ 
console.1og (new Date () .toDateString()) ; 
} 
试 改写 上 述 函 数 的 定义 语法 ， 成 为 等 价 的 Object 对 象 实例 中 的 函数 (方法 ) 。 
3. 已 知 有 如 下 标准 函数 的 定义 语法 : 
function monster base (name = 'new', HP = 100, MP = 50) 
{ 
console.1og('RAbout this monster:') ; 
console.1og(`” name: Sfname} ) ; 
console.1og(`” HP: ${HP}*) ; 
console.log(. MP: ${MP}*) ; 
} 
试 改写 上 述 函 数 的 定义 语法 ， 成 为 等 价 的 箭头 函数 表达 式 。 
4. 已 知 有 如 下 3 个 函数 的 定义 语法 : 
function f01() 
{ 


console.log('Hello, Earth!') ; 
} 


function f02() 
{ 
console.log('Hello, Solar System!') ; 


£01() ; 
} 


function £03() 
{ 

console.log('Hello, Galaxy!') ; 
} 


试 改写 上 述 各 函数 的 定义 语法 , 使 得 函数 f01() 不 能 在 函数 fb30 内 部 被 调用 ， 仅 能 在 函数 f02() 
内 部 被 调用 。 

5. 已 知 有 如 下 标准 函数 的 定义 语法 : 

function welcome () 

{ 


alert ('G\'day, and welcome to our official website.') ; 
} 


试 改写 上 述 函 数 的 定义 语法 ， 成 为 仅 能 被 调用 1 次 的 匿名 函数 。 

6. 已 知 参 数 n 的 数据 为 小 于 100 的 正 整数 ， 试 编写 一 个 递归 函数 sum_of square(0)， 以 返回 从 
正 整数 1 到 变量 的 正 整数 为 止 的 平方 和 。 

7. 试 定义 名 称 为 zodiac01 的 生成 器 , 以 及 名 称 为 zodiac02 的 生成 器 函数 , 使 得 生成 器 zodiac01 
和 生成 器 函数 zodiac020， 均 可 和 迭代 如 下 顺序 的 字符 串 : 


'Rat'、 'Ox'、 'Tiger'、 'Hare'、 'Dragon'、 'Snake'、 'Horse'、 'Sheep'、 'Monkey'、'Rooster'、 'Dog'、 
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‘pig'。 

8. 通过 Promise 对 象 实例 ， 编 写实 现 如 下 功能 的 版 本 : 

限定 用 户 在 6 秒 内 ， 在 特定 的 文本 字段 里 ， 输 入 介 于 1~ 100 之 间 的 整数 值 。 并 且 ， 无论 被 输 
入 的 整数 值 ， 是 否 在 范围 内 ， 都 要 告知 用 户 是 否 输入 正确 。 


第 阳 章 


处 理 数 值 


JavaScript 语言 支持 一 系列 内 置 的 函数 (function) /方法 (method) 与 属性 (property) ， 以 便 
处 理 不 同类 型 的 数据 。 
在 网 页 浏览 器 的 JavaScript 引 敬 里， 内置 的 函数 /方法 与 属性 ， 均 附 挂 于 特定 的 对 象 object) 
或 对 象 实例 〈object instance) 中 。 例 如 : 
@ 函数 window.parseInt() 与 属性 window.Infinity 就 是 被 附 挂 于 window 对 象 实例 中 的 函数 与 届 
性 ， 并 且 可 分 别 简写 为 parseInt0 和 Infinity。 
@ ”函数 Math.pow() 与 属性 Math.PI 就 是 被 附 挂 于 Math 对 象 中 的 函数 与 属性 。 其 完整 写法 分 别 为 
window.Math.pow() 和 window.Math.PI.。 


在 JavaScript 语言 里 ， 整 数 和 带 有 小 数 的 浮 点 数 的 数据 类 型 (data type) 均 为 数值 (number 
value) ， 所 以 处 理 数 值 的 函数 与 属性 ， 主 要 被 附 挂 于 Number 和 Math 对 象 里 。 


6.1 Number 对 象 的 内 置 属性 


Number 对 象 中 的 所 有 属性 ， 均 代表 特定 的 数值 (number value) 或 无 穷 值 (infinity) 。 


6.1.1 最 大 的 正 数 和 安全 整数 (ES6) 


在 Number 对 象 里 ， 其 属性 : 

e@ MAX VALUE 代表 可 被 表示 的 最 大 正 数 值 ， 例 如 1.7976931348623157e+308 ， 也 就 是 
1.7976931348623157X 10?08。 

。 MAX SAFE INTEGER 代表 可 被 表示 的 最 大 安全 整数 (maximum safe integer )， 例 如 23 - 1 ， 
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也 就 是 9007199254740991。 


下 面 通过 示例 ， 进 行 最 大 正 数 和 安全 整数 的 调试 。 
【6-1-1-maximum-values-and-isSafelntegerjs】 

Console.1og (Number .MAX VALUE) ; 

console.1og (-Number .MAX VALUE) ; 

console.1og (Number .MAX SAFE INTEGER) ; 

console.1og (-Number .MAX SAFE INTEGER) ; 

let answer = Number.isSafeInteger (Number.MAX SAFE INTEGER) ; 

console.log(answer) ; 


answer = Number.isSafeInteger (Number .MAX SAFE INTEGER + 1) ; 


console.log(answer) ; 


【相关 说 明 】 


console.1og (Number .MAX VALUE) ; 


显示 出 1.7976931348623157e+308， 也 就 是 1.7976931348623157X 10%。 


console.log(-Number .MAX VALUE) ; 


显示 出 -1.7976931348623157e+308， 也 就 是 -1.7976931348623157X 103%。 


console.1og (Number .MAX_SRAFE_INTEGER) ; 


显示 出 9007199254740991。 


console.1og (-Number .MAX_ SAFE INTEGER) ; 


显示 出 -9007199254740991。 


let answer = Number.isSafeInteger (Number.MAX SAFE INTEGER) ; 


函数 Number.isSafeInteger(0) 用 来 判断 ， 被 传 入 的 数据 ， 是 否 为 安全 范围 内 的 整数 值 。 在 此 ， 
Number.isSafeInteger(Number.MAX_SAFE_INTEGER) 返 回 布尔 值 true, 所 以 此 语句 声明 了 初始 数据 


为 布尔 值 true 的 变量 answer。 


console .log (answer) ; 


answer = Number.isSafeInteger(Number.MRX_SRFE_INTEGER + 1) ; 


【Number.MAX_SAFE_INTEGER + 1) 的 结果 值 为 9007199254740992， 已 经 高 于 安全 范围 的 


最 大 整数 值 了 。 在 此 ，Number.isSafeInteger(Number.MAX_SAFE_INTEGER + 1) 返 加 


所 以 此 语句 将 布尔 值 false， 赋 给 变量 answer。 


6.1.2 ”最 小 的 正 数 和 安全 整数 (ES6) 


在 Number 对 象 里 ， 其 属性 : 


布尔 值 false， 
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e@ MIN_VALUE 代表 可 被 表示 的 最 小 正 数值 ， 例 如 Se-324， 也 就 是 5X10324。 

。 MIN_SAFE INTEGER 代表 可 被 表示 的 最 小 安全 整数 ( maximum safe integer )， 例 如 -(23 - 1)， 
也 就 是 -9007199254740991。 

下 面 通过 示例 ， 进 行 最 小 的 正 数值 和 安全 整数 的 调试 。 


【6-1-2-mininum-values-and-isSafelntegerjs】 


console.1og (Number .MIN VALUE) ; 
console.1og (-Number .MIN VALUE) ; 
console.1og (Number .MIN SAFE INTEGER) ; 
console.log(-Number .MIN SAFE INTEGER) ; 


let answer = Number.isSafeInteger (Number.MIN SAFE INTEGER) ; 
console.log(answer) ; 
answer = Number.isSafeInteger (Number .MIN SAFE INTEGER - 1) ; 


console.log (answer) ; 


【相关 说 明 】 

console.1og (Number .MIN VALUE) ; 

显示 5e-324， 也 就 是 代表 5X 10324。 

console.1log(-Number .MIN VALUE) ; 

显示 -5e-324， 也 就 是 代表 -5X 10324。 

console .1log (Number “MIN_SAFE_INTEGER) 

显示 -9007199254740991。 

console.1log(-Number.MIN_SAFE_INTEGER) ; 

显示 9007199254740991。 

let answer = Number.isSafeInteger (Number.MIN_SAFE INTEGER) 天 

函数 Number.isSafeInteger() 用 来 判断 ， 被 传 入 的 数据 ， 是 否 为 安全 范围 内 的 整数 值 。 在 此 ， 
Number.isSafeInteger(Number.MIN_SAFE_INTEGER) 返 回 布尔 值 tue， 所 以 此 语句 声明 了 初始 数据 
为 布尔 值 true 的 变量 answer。 


console.1log (answer) ; 


answer = Number.isSafeInteger (Number.MIN SAFE INTEGER - 1) ; 


【Number.MIN_SAFE_INTEGER - 1】 的 结果 值 为 -9007199254740992， 低 于 安全 范围 的 最 小 
整数 值 。 在 此 ，Number.isSafeInteger(Number.MIN_SAFE_INTEGER) 返 回 布尔 值 false， 所 以 此 语句 
将 布尔 值 false， 赋 给 变量 answer。 
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6.1.3 正 负 无 穷 值 


JavaScript 编程 思想 : 从 ES5 到 ES9 


在 Number 对 象 里 ，NumberNEGATIVE _INFINITY 代表 负 无 穷 值 (negative infinity) ， 会 返 
可 -Infinity;， Number.POSITIVE INFINITY 代表 正 无 穷 值 (positive infinity) ， 会 返回 Infinity。 欲 描 
述 无 穷 值 mnfinity， 也 可 直接 在 源 代码 里 ， 编 写成 为 Infinity 或 window.Infinity。 关 于 正 负 无 穷 值 的 
调试 ， 可 参考 如 下 示例 。 
【6-1-3-infinities.js】 


console.1og (Number .NEGATIVE INFINITY) ; 
console.1og (-Number .NEGATIVE INFINITY) ; 
console.1log('') 


console.1og (Number .POSITIVE INFINITY) ; 
console.1o0g(-Number .POSITIVE INFINITY) ; 


【相关 说 明 】 
console.1og (Number .NEGATIVE INFINITY) ; 
显示 -Infinity。 
console.1og (-Number .NEGATIVE INFINITY) ; 
显示 Infinity。 
console.10og('') ; 
console.1log (Number .POSITIVE_INFINITY) ; 
显示 Infinity。 
console.log(-Number .POSITIVE INFINITY) ; 


显示 -Infinity。 


6.1.4” 非 数值 的 判断 (ES6) 


函数 isNaNO 和 Number.isNaNO 均 可 用 来 判断 ， 被 传 入 的 参数 数据 ， 是 否 为 【 非 数值 (not a 
number)】。 其 不 同 点 在 于 : 

@ isNaNO0 会 试图 转换 被 传 入 的 数据 , 成 为 数值 . 若 可 转换 成 为 数值 (number value ), 则 isNaN( 被 
传 入 的 数据 ) 返 回 布尔 值 false， 代 表 被 传 入 的 数据 【并 非 数 值 〗 是 假 ( false ) 的 。 这 也 就 意味 
着 ， 被 传 入 的 数据 ， 可 被 视 为 数值 ! 

e NumberisNaN() 不 会 进行 传 入 数据 的 转换 动作 。 换 名 话说， 任何 数据 类 型 不 是 数值 (number 
Value ) 的 数据 ， 均 会 被 忽略 ， 使 得 NumberisNaN( 被 传 入 的 数据 ) 返 回 让 人 较 难 理解 的 布尔 值 
false。 其 中 ， 大 概 只 有 NumberisNaN(NaN) 和 NumberisNaN(0 /0) 会 返回 布尔 值 true。 


关于 并 非 数值 的 评估 的 调试 ， 可 参考 如 下 示例 。 


【6-1-4-NaN-and-isNaN.js】 
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【相关 说 明 】 


声明 变量 answer。 


显示 原始 常量 NaN， 代 表 非 数值 (not a number) 的 含义 。 


内 置 函 数 isNaNO 可 用 来 判断 ， 传 入 的 数据 ， 是 否 非 数值 。 若 是 ， 则 返回 true; 反之 ， 则 返回 


false。 


内 置 的 函数 NumberisNaNO 和 isNaN(O) 的 功能 几乎 相同 ， 其 不 同 点 在 于 isNaNO 会 试图 转换 传 
入 的 数据 成 为 数值 ， 然 后 再 进行 判断 。 


显示 出 true。 


显示 出 false。 


这 两 个 语句 均 显示 出 false。 


这 两 个 语句 均 显示 出 false。 


这 两 个 语句 均 显示 出 false。 
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这 两 个 语句 均 显 示 出 false。 


这 两 个 语句 均 显示 出 false。 


显示 出 true。 


显示 出 false。 


显示 出 【hello: true】 的 信息 。 


显示 出 【hello: false】 的 信息 。 


这 两 个 语句 均 显示 出 false。 


这 两 个 语句 均 显示 出 false。 


这 两 个 语句 均 显示 出 false。 
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6.1.5 浮 点 数 运算 的 误差 值 (ES6 ) 


在 现代 的 计算 机 里 ， 进 行 任何 浮 点 数 运算 ， 均 会 产生 微小 的 误差 值 。 在 JavaScript 语言 中 ， 任 
何 浮 点 数 运算 的 误差 值 ， 都 不 会 大 于 常量 属性 NumberEPSILON 所 代表 的 数值 
2.220446049250313e-16， 也 就 是 2.220446049250313 X 104。 关 于 浮 点 数 运 算 的 误差 值 的 调试 ， 
可 参考 如 下 示例 。 

【6-1-5-Number-EPSILONJjs】 


let a= 0.33, b= 0.47, c= 0.8 : 


console.log(la +b == c); 
console.log(c - a == b); 
console.log(c - b == a); 


console.1og('') ; 


console.log(c - a) ; 
console.log(c - b) ; 
console.1log('') ; 


console.1og (Number .EPSILON) ; 
console.log(c - a - b < Number.EPSILON) ; 
console.log(c - b - a < Number.EPSILON) ; 


【相关 说 明 】 

let a= 0.33, p = 0.47, c= 0.8 ; 

声明 变量 a、b 与 ce， 其 初始 数值 分 别 为 浮 点 数 0.33、0.47 与 0.8。 
console.log(a + b == c) ; 


【a+b 一 c】 当 前 等 价 于 【0.33 + 0.47 一 0.8】， 而 且 返 回 布尔 值 true。 


console.log(c - a == b) 
【c -a==b】 当 前 等 价 于 【0.8 - 0.33 == 0.47】， 理 论 上 【应 该 】 返 回 布尔 值 true 才 对 ， 实 际 
布尔 false! 这 是 因为 计算 机 进行 浮 点 数 的 运算 时 ， 常 常会 有 误差 。 
console.log(c -b== a) ; 
【c-b 一 a】 当前 等 价 于 【0.8-0.47==0.33】, 理论 上 【应 该 】 返 回 布尔 值 ttue， 实 际 亦 返 区 
布尔 值 false。 


console.log(c - al ; 


却 返 


显示 出 【c - a】 的 结果 值 为 0.47000000000000003， 却 不 是 正确 的 0.47。 


console.log(c - b) ; 


显示 出 【c-b】 的 结果 值 为 0.33000000000000007， 却 不 是 正确 的 0.33。 


console.10g('') ; 


console.1log (Number .EPSILON) ; 
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显示 出 常量 属性 Number.EPSILON 的 数值 为 2.220446049250313e-16， 也 就 是 
2.220446049250313 X 10156， 代 表 着 浮 点 数 运 算 的 最 大 误差 。 

console.log(c ~- a - b < Number.EPSILON) ; 

为 了 正常 比较 【c - a == b】， 可 将 之 改 成 带 有 Number.EPSILON 的 等 价 表达 式 【c - a - b < 
Number.EPSILON]】 。 

console.log(c ~- b - a < Number.EPSILON) ; 

为 了 正常 比较 【c - b == a】， 可 将 之 改 成 带 有 Number.EPSILON 的 等 价 表达 式 【c - b - a < 
Number.EPSILON]】 。 


6.2 ”Number 对 象 的 内 置 函 数 


在 Number 对 象 中 ， 有 些 函 数 / 方法 被 附 挂 在 第 1 层 ， 例 如 【Number.isFinite()】; 有 些 函数 
则 被 附 挂 于 第 2 层 属性 prototype 里 ， 例 如 【Number.prototype.toString()】。 

【Number.prototype. 函 数 名 称 ()】 在 实际 使 用 上 要 被 改写 成 为 【变量 名 称 .函数 名 称 ()】 才 行 ， 
例如 ， 已 知 当前 数据 为 特定 数值 的 变量 value， 通 过 改写 Number.prototype.toString(16) 成 为 
value.toString(16)， 代 表 要 将 变量 value 中 的 数值 ， 转 换 成 十 六 进 制 数码 。 


6.2.1 ”转换 为 特定 进 制 的 数码 字符 串 


在 JavaScript 语言 里 ， 显 示 给 用 户 观看 的 数码 ， 是 十 进 制 的 数值 Cnumber value) 。 在 转换 为 
其 他 进 制 的 场合 中 ， 编 程 人 员 可 通过 【当前 数据 为 特定 数值 的 变量 名 称 .toString( 特 定 进 制 的 基数 
值 )】 的 语法 ， 转 换 特定 数值 ， 成 为 数值 所 代表 的 特定 进 制 的 数码 字符 串 。 关 于 转换 成 为 特定 进 制 
的 数码 字符 串 的 综合 运用 ， 可 参考 如 下 示例 。 

【6-2-1-Number-toString.js】 


console.1og (Number .isFinite(32000)) ; 
console.1og (Number .isFinite('32000')) ; 
console.10g('') ; 


let value = 32000 ; 


console.log (value.tostring(2)) ; 
console.log(value.toString(4)) ; 
console.log (value.tostring(8)) ; 
console.log (value.tostring(16)) ; 
console.10g('') ; 


value = 0b10111100 ; 


console.log (value.tostring(4)) ; 
console.log (value.toSstring(8)) ; 
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console.1log(value.toString(10)) ; 
console.log(value.toString(16)) ; 
console.10g('') ; 


Value = 002375 ; 


console.log (value.tostring(2)) ; 
console.log (value.tostring(4)) ; 
console.log (value.toString(10)) ; 
console.log (value.tostring(16)) ; 
console.1log('') ; 


value = Oxf25c ; 


console.log (value.toString(2)) ; 
console.log(value.toString(4)) ; 
console.log(value.toString(8)) ; 
console.log (value.toString(10)) ; 
console.1log('') ; 


【相关 说 明 】 

console.1log (Number .isFinite(32000)) ; 

函数 NumberisFinite0 可 判断 传 入 的 数据 ， 是 否 为 有 限 的 数值 。 此 语句 显示 出 true， 因 为 数值 
32000 是 有 限 数 。 

console.1og (Number .isFinite('32000')) ; 

此 语句 显示 出 false， 因 为 字符 串 32000' 并 未 被 主动 转换 为 数值 32000 之 后 ， 再 进行 判断 。 

let value = 32000 : 

此 语句 声明 了 初始 数值 为 整数 值 32000 的 变量 value。 

console.1log(value.toString(2)) ; 

显示 出 十 进 制 整 数值 32000 的 二 进 制 数码 111110100000000。 

console.log(value.toString(4)) ; 

显示 出 十 进 制 整数 值 32000 的 4 进 制 数码 13310000。 

console.log (value.toString(8)) ; 

显示 出 十 进 制 整数 值 32000 的 八进制 数码 76400。 

console.log (value.tostring(16)) ; 

显示 出 十 进 制 整数 值 32000 的 十 六 进 制 数码 7d00。 


console.1log('') ; 


value = 0b10111100 ; 


此 语句 将 二 进 制 (binary) 整数 值 10111100， 赋 给 变量 value。 其 中 ，0b 开头 的 一 串 0 和 1 的 
组 合 ， 是 二 进 制 字面 量 (binary literal) ， 用 来 表示 二 进 制 的 整数 值 。 
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console.log (value.toString(4)) ; 

显示 出 二 进 制 整数 值 10111100 的 4 进 制 数码 2330。 
console.log (value.toString(8)) ; 
显示 出 二 进 制 整数 值 10111100 的 八进制 数码 274。 
console.log (value.toString(10)) ; 

显示 出 二 进 制 整 数值 10111100 的 十 进 制 数 码 188。 
console.log (value.toString(16)) ; 
显示 出 二 进 制 整 数值 10111100 的 十 六 进 制 数码 bc。 


console.10g('') ; 


value = 002375 : 

此 语句 将 八进制 〈octal) 整数 值 2375， 赋 给 变量 value。 其 中 ，0o 开头 的 一 串 0 至 7 的 组 合 ， 
是 八进制 字面 量 〈octalliteral) ， 用 来 表示 八进制 的 整数 值 。 

console.log (value.tostring(2)) ; 

显示 出 八进制 整数 值 2375 的 二 进 制 数码 10011111101。 

console.log (value.tostring(4)) ; 

显示 出 八进制 整数 值 2375 的 4 进 制 数码 103331。 

console.log(value.toString(10)) ; 

显示 出 八进制 整数 值 2375 的 十 进 制 数码 1277。 

console.log(value.toString(16)) ; 

显示 出 八进制 整数 值 2375 的 十 六 进 制 数码 4fd。 


console.1log('') ; 


value = 0xf25c ; 


此 语句 将 十 六 进 制 (hexadecimal) 整数 值 全 5c， 赋 给 变量 value。 其 中 ，0x 开头 的 一 串 0 ~ 9 
至 a~f 的 组 合 ， 是 十 六 进 制 字面 量 (hexadecimal literal) ， 用 来 表示 十 六 进 制 的 整数 值 。 


console.log(value.toString(2)) ; 


显示 出 十 六 进 制 整数 值 P5c 的 二 进 制 代码 1111001001011100。 


console.log(value.toString(4)) ; 


显示 出 十 六 进 制 整数 值 PSc 的 4 进 制 代码 33021130。 


console.log (value.tostring(8)) ; 


显示 出 十 六 进 制 整 数值 人 25c 的 八进制 代码 171134。 


console.log (value.toString(10)) ; 
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显示 出 十 六 进 制 整数 值 人 25c 的 十 进 制 代码 62044。 


6.2.2 ”处 理 小 数 格式 


点 数 具 有 小 数 的 部 分 ， 可 通过 【当前 数据 为 特定 浮 点 数值 的 变量 名 称 】 衔 接 .toExponential 
(小 数位 数 ) 、.toFixed (小 数位 数 ) 和 .toPrecision (整数 和 小 数 的 总 位 数 ) ， 以 决定 浮 点 数 的 小 
数位 数 。 关 于 处 理 小 数 格式 的 细部 运用 ， 可 参考 如 下 示例 。 


【6-2-2-decimal-formattings.js】 


let result = Math.PI * (100 ** 2) ; 


console.log(result) ; 
console.1og('') ; 


console.1og (result .toExponential()) ; 
console.1og (result .toExponential(4)) ; 
console.1og (result .toExponential(3)) ; 
console.1og (result .toExponential(2)) ; 
console.10g('') ; 


console.log(result.toFixed()) ; 
console.log (result .toFixed(4)) ; 
console.log (result .toFixed(3)) ; 
console.log (result .toFixed(2)) ; 
console.1log('') ; 


console.log (result .toPrecision()) ; 
console.log(result.toPrecision(4)) ; 
console.log (result .toPrecision(3)) ; 
console.log (result .toPrecision(2)) ; 
console.1log('') ; 


let value = 55.8175 ; 


console.log (value.toPrecision()) ; 
console.1log (value.toPrecision(4)) ; 


console.log(value.toPrecision(3)) 
console.log(value.toPrecision(2)) ; 
console.10g('') ; 


【相关 说 明 】 

let result = Math.PI * (100 xx 2) ; 

此 语句 声明 了 初始 数值 为 【半径 是 100 的 圆 面积 】 的 变量 result。 
console.log(result) ; 


显示 出 半径 为 100 的 圆 面积 的 数值 31415.926535897932。 


console.10g('') ; 


console.log (result .toExponential()) ; 
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result.toExponential() 以 标准 科学 记 数 法 ， 返 回 圆 面 积 的 数值 3.1415926535897932e+4。 
console.1og (result.toExponential (4)) ; 

resulttoExponential(4) 以 标准 科学 记 数 法 ， 返 回 圆 面 积 的 具有 4 位 小 数 的 数值 3.1416e+4。 
console.log(result.toExponential(3)) ; 
resulttoExponential(3) 以 标准 科学 记 数 法 ， 返 回 圆 面积 的 具有 3 位 小 数 的 数值 3.142e+4。 
console.log(result.toExponential(2)) ; 
resulttoExponential(2) 以 标准 科学 记 数 法 ， 返 回 圆 面积 的 具有 2 位 小 数 的 数值 3.14e+4。 


console.1log('') ; 


console.log (result.toFixed()) ; 
result.toFixed() 以 标准 科学 记 数 法 ， 返 
console.log (result .toFixed(4)) ; 
resulttoFixed(4) 以 定点 表示 法 ， 返 回 圆 面积 的 具有 4 位 小 数 的 数值 31415.9265。 


console.log (result .toFixed(3)) ; 


El 


圆 面 积 的 无 小 数 的 定点 表示 法 31416。 


resulttoFixed(3) 以 定点 表示 法 ， 返 回 圆 面积 的 具有 3 位 小 数 的 数值 31415.927。 


console.log (result.toFixed(2)) ; 
resulttoFixed(2) 以 定点 表示 法 ， 返 回 圆 面 积 的 具有 2 位 小 数 的 数值 31415.93。 


console.log('') ; 


console.1log (result .toPrecision()) ; 


result.toPrecision() 通 过 无 特殊 设置 的 小 数 精度 表示 法 ， 返 回 圆 面 积 的 数值 
31415.926535897932。 


console.log(result .toPrecision(4)) ; 
result.toPrecision(4) 以 小 数 精度 表示 法 ， 返 回 圆 
console.log (result .toPrecision(3)) ; 


result.toPrecision(3) 以 小 数 精度 表示 法 ， 返 回 


console.log (result .toPrecision(2)) ; 


result.toPrecision(2) 以 小 数 精度 表示 法 ， 返 回 


console.10g('') ; 


而 积 的 总 位 数 4 位 的 数值 3.142e+4。 


到 


j 积 的 总 位 数 3 位 的 数值 3.14e+4。 


j 积 的 总 位 数 2 位 的 数值 3.1e+4。 


let value = 55.8175 ; 


此 语句 声明 了 初始 数值 为 55.8175 的 变量 value。 


console.log(value.toPrecision()) ; 


value.toPrecision() 通 过 无 特殊 设置 的 小 数 精度 表示 法 ， 返 回 变量 value 的 数值 55.8175。 
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console.log (value.toPrecision(4)) ; 


Val 


console.log (value.toPrecision(3)) ; 


Va 


console.log (value.toPrecision(2)) ; 


Va 


ue.toPrecision() 以 小 数 精 度 表示 法 ， 返 回 变量 value 的 总 位 数 4 位 的 数值 55.82。 


ue.toPrecision() 以 小 数 精 度 表 示 法 ， 返 回 变量 value 的 总 位 数 3 位 的 数值 55.8。 


ue.toPrecision() 以 小 数 精度 表示 法 ， 返 回 变 量 value 的 总 位 数 2 位 的 数值 56。 


函数 【toPrecision( 总 位 数 )】 会 通过 一 般 格式 或 科学 记 数 法 ， 返 回 特定 数值 。 通 过 科学 记 数 法 ， 


加 以 返 


本 的 时 机 ， 是 当 特 定数 值 的 总 位 数 过 多 时 。 


6.2.3 


在 


关 


转换 为 数值 


JavaScript 语言 里 ， 可 顺利 被 转换 成 为 数值 的 数据 ， 大 致 有 以 下 几 种 : 

内 含 特定 原始 数值 (primitive number value ) 的 Number 对 象 实例 的 变量 ， 例 如 在 语句 【let 
num _obj = new Number(3591.8) ;】 中 的 变量 num_obj。 

布尔 值 false 或 true。 

原始 常量 undefined、null 或 空 字符 串 "。 

最 多 内 含 1 个 小 数 点 纯粹 数字 0 ~ 9 所 构成 的 字符 囊 ， 例 如 '2591.8'、'1314.35'、'2013'、”775' 
不 包含 小 数 点 '0x'、'00'、'0' 和 '0b' 开 头 并 衔接 纯粹 数字 0 ~ 9 所 构成 的 字符 串 ! 例如 '0x5c6f、 
'00237'、'0237'、'0b11011101'。 这 也 就 意味 着 不 支持 【转换 带 有 小 数 部 分 的 十 六 进 制 、 八 进 制 
及 二 进 制 〗 的 字符 囊 代码 。 


于 转换 成 为 数值 的 综合 运用 ， 可 参考 如 下 示例 。 


【6-2-3-converting-to-numbers.js】 


let num obj = new Number (3591.8) ; 


num obj.second = 5201.53 ; 
num obj.third = 25.35 ; 


console.log (num obj) ; 
console.log (typeof num obj) ; 
console.10g('') ; 


console.log (num obj.valueOf ()) ; 


console.log (typeof num obj.valueOf()) ; 


console.10g('') ; 


console.log (num obj.second) ; 
console.log (typeof num obj.second) ; 
console.1log('') ; 


console.log (num obj.third) ; 
console.log (typeof num obj.third) ; 
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【相关 说 明 】 


此 语句 声明 了 变量 num_obj， 其 初始 数据 为 内 含 数值 3591.8 的 Number 对 象 实例 。 


此 语句 在 变量 num_obj 的 Number 对 象 实例 中 ， 增 加 了 数值 为 5201.53 的 属性 second。 


此 语句 在 变量 num_obj 的 Number 对 象 实例 中 ， 增 加 了 数值 为 25.35 的 属性 third。 


显示 出 【Number {3591.8, second: 5201.53, third: 25.35} 】 的 信息 。 


显示 出 变量 num_obj 的 数据 类 型 为 'object'。 


显示 出 变量 num_obj 的 Number 对 象 实例 中 的 数值 3591.8。 
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显示 出 在 变量 num_obj 的 Number 对 象 实例 中 ， 其 数值 的 数据 类 型 number'。 
console.1log('') ; 


console.1og (num obj.second) ; 


显示 出 属性 num_obj.second 的 数值 5201.53。 
console.1og (typeof num obj.second) ; 


显示 出 属性 num_obj.second 数值 的 数据 类 型 number 。 


console.1log('') ; 

console.log (num obj.third) ; 

显示 出 属性 num_obj.third 的 数值 25.35。 
console.log (typeof num obj.third) ; 


显示 出 属性 num_obj.third 的 数值 的 数据 类 型 number 。 


console.1og('') ; 


let answer = Number('333') == parseInt ('333') ; 

此 语句 声明 变量 answer， 其 初始 数值 为 布尔 值 true， 来自 于 表达 式 【 Number('333') == 
parseInt(333")】 的 结果 值 。 内 置 函 数 parseInt() 与 Number 对 象 的 构造 函数 Number0， 均 可 用 来 将 传 
入 的 字符 串 ， 转 换 成 整数 值 。 


console.log (answer) ; 
console.log('') ; 


answer = Number('7.7') == parseFloat('7.7') ; 
表达 式 【Number('7.7) == parseFloat(7.7')】 的 结果 值 为 布尔 值 tue， 所 以 此 语句 将 布尔 值 true， 
赋 给 变量 answer。 


console.1log (answer) ; 
console.10g('') ; 


console.1log (Number ('0b11011')) ; 
Number('0b11011") 返 回 二 进 制 数码 11011 对 应 的 十 进 制 数值 27。 
console.log (parseInt ('0b11011')) ; 


parseInt(0b11011) 返 回 0， 明 显 无 法 将 二 进 制 数码 ， 转 换 为 对 应 的 数值 。 


console.log('') ; 

console.1log (Number ('001557')) ; 
Number('001557') 返 回 八进制 数码 1557 对 应 的 十 进 制 数值 879。 
console.log(ParseInt('0o1557")) ; 


parseInt(0o1557) 返 回 0， 明 显 无 法 将 八进制 数码 ， 转 换 为 对 应 的 数值 。 


Console.1og('') ; 


console.1log (Number ('0xffcc')) ; 


Number('0xffcc) 返 回 十 六 进 制 数码 ffec 对 应 的 十 进 制 数值 65484。 


console.log (parseInt ('0xffcc')) ; 


十 六 进 制 数码 ffec 对 应 的 十 进 制 数值 65484。 


Ee 


parseInt(Oxffec) 可 以 返 


console.1log('') ; 


console.1log (Number ('1314love')) ; 


Number('1314love') 返 回 NaN (not a number)， 表 示 无 法 将 字符 '1314love' 成 功 转换 为 数值 。 


console.log (parseInt('1314love')) ; 


parseInt('1314love') 却 可 以 返回 数值 1314。 


6.2.4 判断 是 否 为 整数 或 有 限 数 (ES6) 


通过 Number 对 象 的 函数 isInteger(), 可 判断 传 入 的 数据 是 否 为 整数 (integer); 而 其 函数 isFiniteO) 
则 可 判断 传 入 的 数据 是 否 为 有 限 数 (finite number) 。 关 于 判断 是 否 为 整数 或 有 限 数 的 调试 ， 可 参 
考 如 下 示例 。 
【6-2-4-Number-isinteger-and-isFinite.js } 


console.1og (Number .isInteger (Number.MAX VALUE)) 
console.1og (Number .isInteger (Number.MIN VALUE)) 
console.1og (Number .isInteger (Math.PI)) ; 
console.1og (Number .isInteger('777')) ; 
console.1log (Number .isInteger (777)) ; 
console.1log('') ; 


console.log (Number.isInteger (true)) ; 
console.1log (Number .isInteger (false)) ; 
console.10g('') ; 


console.log (Number.isInteger (NaN)) ; 
console.1log (Number .isInteger (Infinity)) ; 
console.10g('') ; 


1/1 

console.log (isFinite(Infinity)) ; 
console.log (isFinite(-Infinity)) ; 
console.log (isFinite(NaN)) ; 
console.log('') ; 


console.log (isFinite (Number.MAX VALUF)) ; 
console.log(isFinite(undefined)) ; 
console.log(isFinite(true)) ; 

console.log (isFinite(false)) ; 
console.log (isFinite(null1)) ; 
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【相关 说 明 】 
console.1og (Number .isInteger (Number.MAX VALUE)) ; 
Number.isInteger() 可 用 来 判断 传 入 的 数据 是 否 为 整数 值 。 此 语句 显示 出 true。 
console.1og (Number .isInteger (Number.MIN VALUE)) ; 
显示 出 false。 
console.1og (Number .isInteger (Math.PI)) ; 


此 语句 显示 出 false， 因 为 Math.PI 返 


console.1og (Number .isInteger ('777')) ; 
此 语句 显示 出 false， 因 为 777' 是 字符 串 。 


console.1og (Number.isInteger (777)) ; 
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console.1og('') ; 


console.log (Number.isInteger (true)) ; 
此 语句 显示 出 false， 因 为 传 入 函数 isInteger() 的 参数 数据 ， 是 布尔 值 tue， 并 非 整数 值 。 
console.log (Number.isInteger (false)) ; 
此 语句 显示 出 false， 因 为 传 入 函数 isInteger() 的 参数 数据 ， 是 布尔 值 false， 并 非 整 数值 。 


console.1l0og('') ; 


console.1og (Number .isInteger (NaN)) ; 
console.1log (Number.isInteger (Infinity)) ; 


这 两 个 语句 均 显 示 出 false 的 信息 ， 因 为 分 别传 入 函数 isInteger() 的 数据 NaN (not a number) 


及 Infinity (无 穷 大 ) ， 均 为 原始 常量 。 


console.10g('') ; 


console.log (isFinite(Infinity)) ; 
console.log (isFinite(-Infinity)) ; 


内 置 函 数 isFiniteO 可 判断 传 入 的 数据 , 是 否 为 有 限 的 数值 。 这 两 个 语句 均 显 示 出 false 的 信息 ， 


因为 正 无 穷 大 (Infinity) 与 负 无 穷 大 〈-Infinity) 并 不 是 有 限 数 。 


console.log (isFinite(NaN)) ; 


此 语句 显示 出 false， 因 为 原始 常量 NaN (nota number) 并 


console.log('') ; 
console.log (isFinite (Number.MRX_VRLUE) ) ; 
显示 出 true。 


console.log (isFinite(undefined)) ; 


此 语句 显示 出 false， 因 为 原始 常量 undefined 并 不 是 数值 。 


console.1log(isFinite(true)) ; 


console.log(isFinite(false)) ; 
console.log (isFinite(nul1)) ; 


这 3 个 语句 均 显 示 出 true 的 信息 ， 因 为 布尔 值 true、false 以 及 原始 常量 null， 被 视 为 有 限 数 。 


6.3 Math 对 象 


在 内 置 的 Math 对 象 里 , 存在 数学 相关 的 属性 和 函数 , 以 便 对 特定 数值 , 进行 数学 形式 的 操作 。 


6.3.1 Math 对 象 的 常量 属性 


Math 对 象 存在 数学 相关 的 常量 属性 , 例如 自然 对 数 、 自 然 底数 (在 自然 对 数 函数 中 的 底数 e) 、 
对 数 、 圆 周 率 、 平 方 根 等 。 关 于 Math 对 象 的 常量 属性 的 调试 ， 请 看 下 面 的 例子 。 
【6-3-1-Math-constant-properties.js】 


console.1log (Math.E) ; 
console.log (Math.PI) ; 
console.1log (Math.LN2) ; 
console.1log (Math.LN10) ; 
console.1log (Math .SQRT2) ; 
console.log (Math .LOG2E) ; 
console.1log (Math.LOG10E) ; 
console.log (Math.SORT1_2) ; 


【相关 说 明 】 


console.log (Math.E) ; 


Math 对 象 的 常量 属性 E， 返 回 自然 底数 e 的 数值 2.718281828459045。 


console.log (Math.PI) ; 


Math.PI 返 


加 
加 


周 率 (pi) 的 数值 3.141592653589793。 


console.1log (Math.LN2) ; 


EE 


Math.LN2 返回 2 的 自然 对 数值 0.6931471805599453。 


console.log (Math.LN10) ; 


Math.LN10 返回 10 的 自然 对 数值 2.302585092994046。 


console.log (Math .SQRT2) ; 


Ee 


Math.SQRT2 返 


2 的 平方 根 值 1.4142135623730951。 


console.1og (Math .LOG2E) ; 
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Math.LOG2E 返回 以 2 为 底数 的 e 的 对 数值 1.4426950408889634。 


Math.LOG10E 返回 以 10 为 底数 的 e 的 对 数值 0.4342944819032518。 


Math.SQRT1 2 返回 六 的 平方 根 值 0.7071067811865476。 


6.3.2 Math 对 象 的 函数 (ES6) 


Math 对 象 存在 数学 相关 的 函数 ， 例 如 求 出 绝对 值 的 函数 、 三 角 函 数 以 及 求 出 对 数值 、 最 大 值 、 
最 小 值 、 索 值 等 函数 。 关 于 Math 对 象 的 函数 的 综合 调试 ， 可 参考 如 下 示例 。 


【6-3-2-Math-functions.js】 
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【相关 说 明 】 


此 语句 声明 了 变量 value， 其 初始 数值 为 两 个 介 于 0 ~ 100 之 间 的 随机 数值 ， 加 以 相 减 之 后 的 


Math.abs(value) 返 回 变量 value 数值 的 绝对 值 (absolute value) 。 


此 语句 可 使 得 Math.abs0)、Math.cos0、Math.E 等 ， 在 下 方 大 括 号 里 ， 被 简化 成 为 abs0、cos() 


和 了 等 。 


abs(value) 返 回 变量 value 的 数值 的 绝对 值 (absolute value) 。 


acos(-1) 返 回 -1 的 反 余弦 值 (arccosine) 。 
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console.1log (cos (Math.PI)) ; 


// 双 曲 正弦 函数 sinh、 双 曲 余弦 函数 cosh、 双 曲 正切 函数 tanh 


console.log(cosh(5)) ; 


cosh(5) 返 回 5 的 双 曲 余弦 值 (hyperbolic cosine) 。 


console.log(acosh(10)) ; 


acosh(10) 返回 10 的 反 双 曲 余弦 值 (hyperbolic arccosine) 。 


console.1log('') ; 


console.log(asin(1)) ; 
的 反正 弦 值 (arcsine) 。 


console.log(sin(Math.PI * 0.5)) »; 


asin(1) 返 [ 


sin(Math.PI* 0.5) 返 回 【Math.PI X 0.5】 的 正弦 值 (sine) 。 


console.log(sinh(5)) ; 


sinh(5) 返 回 5 的 双 曲 正弦 值 (hyperbolic sine) 。 


console.log(asinh(10)) ; 


asinh(10) 返 回 10 的 反 双 曲 正弦 值 (hyperbolic arcsine) 。 


console.1log('') ; 


console.log(atan(1)) ; 


atan(1) 返 回 1 的 反正 切 值 Carctangent) 。 


console.log(atan2(10, 20)) ; 


atan2(10, 20) 返回 【10 二 20】 的 反正 切 值 。 


console.log(tan(Math.PI * 0.25)) ; 


tan(Math.PI* 0.25) 返 回 Math.PI X 0.25 的 正切 值 (tangent) 。 


console.log(tanh(1.25)) ; 


tanh(1.25) 返 回 1.25 的 双 曲 正切 值 (hyperbolic tangent) 。 


console.10g('') ; 


console.log(cbrt(-8)) ; 


cbrt(-8) 返 回 -8 的 立方 根 (cube root) 值 ， 也 就 是 -8; 的 数值 。 


console.log (cbrt (27)) ; 


cbrt(27) 返 匠 2 六 的 数值 。 


Console.log(27 ** (1/3)) ; 


27 ** (1/3) 也 返回 273 的 数值 。 
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console.log (pow(27, 1/3)) ; 


1 
pow(27, 1/3) 返 回 27 的 1/3 次 方 (power) 值 ， 也 是 27 的 数值 。 


Console.1log('') ; 


console.1log (ceil(32.1)) ; 
ceil(32.1) 返 回 大 于 且 最 接近 32.1 的 整数 值 。 
console.log (ceil(32.7)) ; 
ceil(32.7) 返 回 大 于 且 最 接近 32.7 的 整数 值 。 
console.log(ceil(-32.1)) ; 
ceil(-32.1) 返 回 大 于 且 最 接近 -32.1 的 整数 值 。 
console.log(ceil(-32.7)) ; 
ceil(-32.7) 返 回 大 于 且 最 接近 -32.7 的 整数 值 。 


console.1log('') ; 


console.1og (clz32(0b111)) ; 


clz32(0bl11) 先 将 二 进 制 数值 111， 转 换 成 为 32 位 二 进 制 数码 
00000000000000000000000000000111 之 后 ， 再 返回 其 开头 0 的 个 数 29。 


console.1og(clz32(0777)) ; // old literal 

clz32(0777) 先 将 八进制 数值 777， 转 换 成 为 32 位 二 进 制 数码 ， 再 返回 其 开头 0 的 个 数 。 
console.log(cl1z32(0o777)) ; // new literal 

clz32(00777) 也 是 先 将 八进制 数值 777， 转 换 成 为 32 位 二 进 制 数码 ， 再 返回 其 开头 0 的 个 数 。 
console.log(clz32(0xfff)) ; 

clz32(0x777) 先 将 十 六 进 制 数值 ff， 转 换 成 为 32 位 二 进 制 数码 ， 再 返回 其 开头 0 的 个 数 。 


console.10g('') ; 


console.log (exp(1)) ; 


exp(1) 返 回 自然 底数 e 的 1 次 方 值 。 


console.1log(E) ; 


E 返回 自然 底数 e 的 数值 。 


console.log(exp(3)) ; 
exp(3) 返 回 自然 底数 的 3 次 方 值 。 


console.log(E ** 3) ; 
E ** 3 返回 自然 底数 的 3 次 方 值 。 


console.log (pow(E, 3)) ; 
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pow(E, 3) 亦 返回 自然 底数 的 3 次 方 值 。 
console.1og('') ; 
console.1og (expml (1)) ; 
expm1(1) 返 回 【 自然 底数 的 1 次 方 值 ， 再 减 去 1】 的 结果 值 。 
console.log(E - 1) ; 
E -1 返回 【自然 底数 减 去 1】 的 结果 值 。 
console.log (expm1(3)) ; 
expm1(3) 返 回 【 自 然 底数 的 3 次 方 值 ， 再 减 去 1】 的 结果 值 。 
console.log(E ** 3-1);，; 
E **3 -1 返回 【自然 底数 的 3 次 方 值 ， 再 减 去 1】 的 结果 值 。 
console.log(pow(E, 3) - 1) ; 
pow(E, 3) - 1 也 返回 【自然 底数 的 3 次 方 值 ， 再 减 去 1】 的 结果 值 。 


console.1log('') ; 


console.1log (floor (15.8)) ; 

floor(15.8) 返 回 小 于 且 最 接近 15.8 的 整数 值 。 
console.log(floor(15.1)) ; 

floor(15.1) 返 回 小 于 且 最 接近 15.1 的 整数 值 。 
console.log (floor(-15.8)) ; 

floor(-15.8) 返 回 小 于 且 最 接近 -15.8 的 整数 值 。 
console.1log (floor(-15.1)) ; 

floor(-15.1) 返 回 小 于 且 最 接近 -15.1 的 整数 值 。 


console.10g('') ; 


// 32-bit single-precision float representation of a number. 
console.1log (fround(9.875)) ; 


fround(9.875) 返 回 最 接近 9.875 的 单 精度 的 浮 点 数值 。 
console.log (fround(9.876)) ; 
fround(9.876) 返 回 最 接近 9.876 的 单 精度 的 浮 点 数值 。 
console.log (fround(9.125)) ; 
fround(9.125) 返 回 最 接近 9.125 的 单 精度 的 浮 点 数值 。 
console.log (fround(9.126)) ; 


fround(9.126) 返 回 最 接近 9.126 的 单 精度 的 浮 点 数值 。 
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Console.1log('') ; 


// hypotenuse of a right triangle 直角 三 角形 的 斜 边 
console.1log(hypot(3，4)) ; 


hypot(3, 4) 返 回 【3 与 4 的 平方 和 】 的 平方 根 值 。 
console.1log(hypot(6，8)) ; 

hypot(6, 8) 返 回 【6 与 8 的 平方 和 】 的 平方 根 值 。 
console.log (hypot (5, 12)) ; 

hypot(5, 12) 返 回 【5 与 12 的 平方 和 】 的 平方 根 值 。 


console.1log('') ; 


let num list = Array.from(Array(11) .keys()) ; 


此 语句 声明 了 变量 num_list， 其 初始 数据 为 Array.from(Array(11).keys()) 动 态 产 生 的 数组 实例 


[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]。 


console.log (hypot(... num list)) ; 
hypot(..…. num_list) 返 回 【0、1、2、…、10 的 平方 和 】 的 平方 根 值 。 


console.1log('') ; 


// 32-bit integer multiplication 
console.1log (imul(2.1, 10)) ; 


函数 imul0 会 进行 【两 个 数值 的 整数 部 分 的 32 位 乘法 运算 】, 并 返回 


10) 会 进行 2.1 与 10 的 整数 部 分 的 乘法 运算 ， 并 返回 其 结果 值 。 
console.log(imul (-5, -8)) ; 
imul(-5, -8) 返 回 -5 与 -8 的 乘法 运算 的 结果 值 。 
console.1log (imul (-3, 7)) ; 
imul(-3, 7) 返 回 -3 与 7 的 乘法 运算 的 结果 值 。 


console.10g('') ; 


// natural logarithm (base e) of a number 
console.log (log(E)) ; 


log(E) 返 回 In(e) 的 数值 。 


console.log(log(E ** 7)) ; 


log(E ** 7) 返 回 In(e”) 的 数值 。 
console.log(l0g2(2 ** 15)) ; 


log2(2 ** 15) 返 回 log, (2 ) 的 数值 。 


console.log (10g10(10 ** 8)) ; 


其 结果 值 。 在 此 , imul(2.1， 


186 | Javascript 编程 思想 : 从 ES5 到 ES9 


log10(10 ** 8) 返 回 log,u(108) 的 数值 。 


console.1og('') ; 


// natural logarithm (base e) of 1 plus a number. 
console.log(loglp(E - 1)) ; 


loglp(E - 1) 返回 In(1+(e-1)) 的 数值 。 


console.log(loglp(E ** 7- 1)); 


loglp(E ** 7 - 1) 返 回 In(1+(e”-1)) 的 数值 。 


console.10g('') ; 


Ee 


// num list = Array.from(new Array(10), (val, index) => index * 3) ; 
num list = Array.from(new Array(10), (value, index) => parseInt (100 * Math.random())) ; 


此 语句 将 内 含 10 个 0 ~ 100 的 随机 整数 值 的 数组 实例 ， 例 如 [33, 86, 55, 3, 9, 51, 93, 66, 82, 7， 
91]， 赋 给 变量 num_list。 


console.1log(num_ list) ; 
console.log (max(... num list)) ; 


车 num_list 的 数据 为 数组 实例 [33, 86, 55, 3, 9, 51, 93, 66, 82, 7, 91]， 则 max(… num_list) 等 价 于 
max(33, 86, 55, 3, 9, 51, 93, 66, 82, 7, 91)， 会 返回 各 数值 中 的 最 大 值 93。 

console.log(min(... num list)) ; 

若 num_list 的 数据 为 数组 实例 [33, 86, 55, 3, 9, 51, 93, 66, 82, 7, 91]， 则 min(… num_list) 等 价 于 
min(33, 86, 55, 3, 9, 51, 93, 66, 82, 7, 91)， 会 返回 各 数值 中 的 最 小 值 7。 


console.10g('') ; 


console.log (pow(2, 5)) ; 


pow(2, 5) 返 加 25 的 数值 。 


console.log(2 ** 5) ; 
2 ** 5 也 返回 2 的 数值 。 


console.10g('') ; 


console.log (pow(27, 1/3)) ; 


1 
273 的 数值 。 


console.10g(27 ** (1/3)) ; 


EE 


pow(27, 1/3) 返 


1 
273 的 数值 。 


Ee 


27 ** (1/3) 也 返 


console.1log('') ; 


console.log (pow(2, 0.5)) ; 
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pow(2, 0.5) 返 回 2” 的 数值 。 
console.log(2 ** 0.5) ; 

2 ** 0.5 也 返回 2” 的 数值 。 
console.log (SQRT2) ; 

SQRT2 返回 V2 ， 等 于 2” 的 数值 。 


console.1log('') ; 


console.log (pow(0.5, 0.5)) ; 


pow(0.5, 0.5) 返 回 0.5%5， 是 上 的 数值 。 


console.log(0.5 ** 0.5) ; 


0.5 ** 0.5 也 返回 0.5%” 的 数值 。 


console.1og(SQRT1_ 2) ; 


SQRT1 2 返 EE ， 也 是 0.5” 的 数值 。 


1 
V2 
console.1log('') ; 


console.log (random()) ; 
console.log (random()) ; 


random() 会 返回 大 于 或 等 于 0， 并且 小 于 1 的 随机 浮 点 数值 。 


console.10g('') ; 


console.1og(100 + parseInt (100 * Math.random())) ; 
100 + parseInt(100 * Math.random()) 的 结果 值 ， 是 介 于 100 ~ 200 之 间 的 随机 整数 值 。 
console.1l1og(-50 + parseInt(100 * Math.random())) ; 


-50+ parseInt(100 * Math.random()) 的 结果 值 ， 是 介 于 -50 ~ 50 之 间 的 随机 整数 值 。 


Console.1log('') ; 


console.1log (round (32.48)) ; 


round(32.48) 返 回 32.48 的 四 舍 五 入 至 个 位 的 数值 32。 


console.log (round(32.51)) ; 


round(32.51) 返 回 32.51 的 四 舍 五 入 至 个 位 的 数值 33。 


console.log (round(-32.48)) ; 


round(-32.48) 返 回 -32.48 的 四 舍 五 入 至 个 位 的 数值 -32。 


console.log (round(-32.51)) ; 
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round(-32.51) 返 回 -32.51 的 四 舍 五 入 至 个 位 的 数值 -33。 


sign(+77) 返 回 1， 代 表 +77 是 正 数 。 


sign(77) 返 回 1， 代 表 77 是 正 数 。 


sign(-77) 返 回 -1， 代 表 -77 是 负数 。 


sign(+66) 返 回 1， 代 表 字 符 串 '+66' 被 转换 后 的 66 是 正 数 。 


sign(66) 返 回 1， 代 表 字 符 串 '66' 被 转换 后 的 66 是 正 数 。 


sign(-66) 返 回 1， 代 表 字 符 串 -66' 被 转换 后 的 -66 是 负数 。 


sign(+0) 返 回 0， 代 表 +0 是 零 值 。 


sign(0) 返 回 0， 代 表 0 是 零 值 。 


sign(-0) 返 回 -0， 代 表 -0 是 负 零 值 。 


sqrt(64) 返 回 V64 的 数值 8。 


64 ** 0.5 返回 6405 的 数值 ， 亦 等 同 于 V64 的 整数 值 8。 


pow(64, 0.5) 也 返回 64%5 的 数值 ， 亦 等 同 于 V64 的 整数 值 8。 
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trunc(56.78) 返 回 56.78 被 截断 〈truncate) 小 数 部 分 的 整数 值 56。 


console.log(trunc(0.779)) ; 

trunc(0.779) 返 回 0.779 被 截断 小 数 部 分 的 整数 值 0。 
console.log(trunc(-0.36)) ; 

trunc(-0.36) 返 回 -0.36 被 截断 小 数 部 分 的 整数 值 -0。 
console.log(trunc('-33.66')) ; 


trunc('-33.66) 先 转换 字符 串 '-33.66' 为 数值 -33.66， 再 返回 被 截断 小 数 部 分 的 整数 值 -33 。 


6.4 练 习 题 


里 , 可 处 理 的 最 大 正 整数 是 什么 ? 安全 范围 内 的 最 大 安全 整数 又 是 什么 ? 
2. 在 JavaScript 语言 里 ，Number.MIN_VALUE 代表 一 个 整数 还 是 浮 点 数 ? 
3. 在 JavaScript 语言 里 ，Number.EPSILON 代表 什么 数值 ? 
4. 试 编写 JavaScript 源 代码 ， 以 转换 并 显示 浮 点 数 2013.5625 对 应 的 二 进 制 、 八 进 制 和 十 六 进 
制 的 数码 。 
5. 试 编写 JavaScript 源 代码 ， 以 转换 并 显示 十 六 进 制 数 值 ff285c 对 应 的 二 进 制 、 八 进 制 的 数 


1. 在 JavaScript 语言 


6. 试 编写 JavaScript 源 代码 ， 以 转换 变量 num03 内 含 的 圆周 率 数值 ， 成 为 具有 3 位 小 数 的 浮 
点 数 。 

7. 试 编写 至 少 3 个 版 本 的 JavaScript 源 代码 ， 将 变量 str01 的 字符 串 '0x57fe'"， 和 变量 str02 的 
字符 串 '0b111011'， 先 分 别 转 换 成 为 数值 之 后 ， 再 进行 相 加 。 最 后 再 将 其 结果 值 ， 显 示 成 为 十 进 制 

8. 试 编写 JavaScript 源 代码 , 以 显示 出 【变量 value01 的 不 超过 100 的 正 整数 , 除 以 变量 value02 
的 不 超过 10 的 正 整 数 的 结果 值 ， 是 否 依然 为 整数 】 的 判断 结果 ， 是 为 真 (true) 或 者 为 假 (false) 。 

9. 通过 3 种 JavaScript 的 语法 ， 表 示 【 3/x, where{xeNI10<x<70}】。 

10. 已 知 特定 直角 三 角形 的 斜 边 的 长 度 为 150， 其 中 一 个 锐角 的 角度 为 30"。 试 通过 Math 对 象 
支持 的 三 角 函 数 ， 计 算 并 显示 两 个 直角 边 的 长 度 。 

11. 试 编写 JavaScript 源 代 码 ， 以 显示 出 介 于 -100 ~ +100 之 间 的 随机 整数 。 


第 / 章 


处 理 字符 串 


在 应 用 程序 中 ， 字 符 串 (string) 经 常 被 处 理 成 为 界面 上 的 各 种 信息 。 在 JavaScript 语言 中 ， 
字符 串 的 搜索 、 获 取 、 蔡 换 、 连 接 、 分 割 、 填 充 、 扩 展 、 匹 配 等 处 理 机 制 ， 自 然 是 不 可 或 缺 的 。 


7.1 String 对象 


在 JavaScript 语言 中 ， 处 理 字符 串 的 各 项 机 制 ， 主 要 依赖 String 对 象 中 的 各 函数 /方法 的 协助 ， 
以 及 单 引号 【'】、 双 引号 【"】、 反 引号 【*】、 加 号 【+】 和 反 和 斜 杠 【\】 运 算 符 的 辅助 。 


7.1.1 子 字符 串 的 索引 值 


子 字符 串 〈sub string) 的 索引 值 (index value) ， 是 指 特定 子 字符 串 ， 在 特定 字符 串 里 的 索引 
位 置 。 若 特定 子 字 符 串 位 于 特定 字符 串 中 的 索引 值 为 n， 则 代表 在 特定 字符 串 里 ， 特 定子 字符 串 出 
现在 第 n+1 个 字符 (character) 开始 的 位 置 。 在 JavaScript 语言 里 ， 索 引 值 是 从 0 开始 起 算 的 ， 所 
以 索引 值 0 代表 第 1 个 字符 的 位 置 ， 而 索引 值 n 代表 第 n+ 1 个 字符 的 位 置 。 下 面 通过 示例 来 介绍 
子 字符 串 索引 值 的 运用 。 

【7-1-1-sub-string-indexings.js】 

let sentence = 'I hope you could live happily ever after.' 


console.log (sentence.length) ; 
console.10g('') ; 


with (console) 
{ 
log (sentence.indexOf ('happy')) ; 
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1og (sentence .indexOof ('happily')) ; 
1og (sentence .indexof ('live')) ; 


Tot yey 


log (sentence.indexOf ('ou')) ; 
log (sentence.indexOf ('ou', 10)) ; 
log (sentence .indexof ('ou', 14)) ; 


log('') ; 


log (sentence.lastIndexOf('1')) ; 

log (sentence.lastIndexOf('1', 26)) ; 
log (sentence.lastIndexOf('1', 16)) ; 
log (sentence.lastIindexOf('1', 13)) ; 


} 
【相关 说 明 】 


let sentence 


= 'I hope you could live happily ever after." 


声明 初始 数据 为 字符 串 的 变量 sentence。 


console.logl(s 


entence.length) ; 


sentence.length 返回 变量 sentence 的 数据 字符 串 的 字符 个 数 41。 


with (console) 


{ 


log (sentence.indexOf ('happy')) ; 


sentence.indexOf('happy') 查 找 不 到 子 字 符 串 'happy'"， 在 变量 sentence 的 数据 字符 串 中 的 索引 位 


置 ， 所 以 返回 -1。 
log(sentence. 


indexOf('happily')) ; 


sentence.indexOf('happily') 找 寻 到 子 字 符 串 'happily' 在 变量 sentence 的 数据 字符 串 的 索引 位 置 
21， 也 就 是 第 22 个 字符 的 位 置 。 


log(sentence. 


indexOf('live’')) ; 


sentence.indexOf('live') 找 寻 到 子 字符 串 ive'， 在 于 变量 sentence 的 数据 字符 串 的 索引 位 置 17， 
也 就 是 第 18 个 字符 的 位 置 。 


be eh 


log (sentence.indexOf ('ou')) ; 


sentence.indexOf('ou') 在 变量 sentence 的 数据 字符 串 里 ， 找 寻 到 子 字符 串 'ou'， 存 在 于 其 索引 位 
置 8， 也 就 是 第 9 个 字符 的 位 置 。 


log (sentence. 


indexOf('ou', 10)) ; 


sentence.indexOf('ou'，10) 在 变量 sentence 的 数据 字符 串 里 ， 从 索引 位 置 10 开始 ， 向 后 找寻 到 


字符 串 'ou， 存 在 了 


1log(sentence. 


其 索引 位 置 12， 也 就 是 第 13 个 字符 的 位 置 。 


indexOf('ou', 14)) ; 
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sentence.indexOf('ou'，14) 在 变量 sentence 的 数据 字符 串 里 ， 从 索引 位 置 14 开始 ， 向 后 查找 不 


到 字符 串 'ou'， 存 在 于 剩余 的 字符 串 里 ， 所 以 


lo0g("'') 


log (sentence.lastIndexOf('1')) ; 


返回 -1。 


sentence.lastIndexOf('1) 在 变量 sentence 的 数据 字符 串 里 ， 找 寻 到 字符 !， 存 在 了 


也 就 是 第 28 个 字符 的 位 置 。 
log(sentence.lastIindexOf ('1', 26)) ; 


sentence.indexOf('1',26) 在 变量 sentence 
到 字符 T， 存 在 于 索引 位 置 17， 也 就 是 第 18 
log(sentence.lastIindexOf ('1', 16)) ; 


sentence.indexOf(l，16) 在 变量 sentence 
到 字符 1， 存在 于 索引 位 置 14， 也 就 是 第 15 


log(sentence.lastIindexOf ('1', 13)) ; 


sentence.indexOf(1，13) 在 变量 sentence 


查找 到 字符 路 ， 存 在 于 剩余 的 字符 串 里 ， 所 以 返回 -1。 


的 数据 字符 串 里 ， 从 索引 位 置 26 开 
个 字符 的 位 置 。 


数据 字符 串 


个 字符 的 位 置 。 


已 ， 从 索引 位 置 16 了 


数据 字符 串 : 


1， 从 索引 位 置 13 于 


7.1.2 ”特定 模式 的 子 字符 串 的 搜索 (ES6) 


若 在 特定 字符 串 里 ， 搜 寻 符合 特定 模式 (pattem) 的 第 1 个 子 字符 串 ， 则 可 通过 【当前 数据 为 
字符 串 的 变量 名 称 .search( 其 数据 为 特定 正则 表达 式 字面 量 的 变量 )】 来 实现 。 
若 欲 找 出 所 有 符合 特定 模式 的 所 有 子 字符 串 ， 则 可 通过 语法 【当前 数据 为 字符 串 的 变量 名 
称 .match( 其 数据 为 特定 正则 表达 式 字 面 量 的 变量 )】 来 达成 。 
若 在 特定 字符 串 里 ， 欲 判断 是 否 包含 特定 子 字 符 串 ， 或 是 以 特定 子 字符 串 开头 或 结尾 ， 也 有 
其 他 相关 函数 可 供 调用 。 关 于 特定 模式 的 子 字 符 串 的 搜索 ， 可 参考 如 下 示例 。 


【7-1-2-sub-string-searchings.js】 


let saying = 'Joanna lovingly loves lovely beloved of Jason.' ; 


let re01 = /lov\wt/g ; 


let index = saying.search(re01) ; 


console.log (index) ; 
console.10og('') ; 


console.log (saying.match (re01) .length) ; 


console.log (saying.startsWith('Jo')) ; 
console.10g('') 


console.1log (saying.startsWith('lov')) ; 
console.log (saying.startsWith('lov', saying.indexOf('lovingly'))) ; 


始 ， 


始 ， 


始 ， 


F 索 引 位 置 27， 


【 往 前 】 查 找 


【 往 前 】 查 找 


【 往 前 】 无 法 
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console.10g('') ; 


console.log (saying.endsWith('ed')) ; 
console.1log (saying.endsWith('on.')) ; 
console.10g('') ; 


console.log(saying.includes('Jason')) ; 


【相关 说 明 】 

let saying = 'Joanna lovingly loves lovely beloved of Jason.' ; 

声明 初始 数据 为 字符 串 的 变量 saying。 

let re01 = /lovNw+/g ; 

此 语句 声明 了 初始 数据 为 正则 表达 式 字面 量 (regular-expression literal) 的 变量 re01。 正则 表达 
式 字面 量 /lovWw+/g 代表 所 有 "lov 开 头 的 子 字符 串 。 其 中 ，【\w】 代 表 可 以 是 字符 a~z、A~Z、0~ 
9 或 【_】， 而 【g]】 代表 全 局 (global) ， 也 就 是 所 有 的 含义 。 

let index = saying.search (re01) ; 

此 语句 声明 了 变量 index, 其 初始 数值 为 7, 代表 符合 变量 re01 的 字面 量 /loww+/ 的 第 1 个 子 字 
符 串 lovingly， 出 现在 变量 saying 的 数据 字符 串 里 的 索引 位 置 7。 


console.log (index) ; 
console.1log('') ; 


console.log(saying.match (re01) .length) ; 

saying.match(re01) 会 返回 数组 实例 ["lovingly", "loves", "lovely", "loved"]， 其 内 含 符合 变量 re01 
的 字面 量 /loww+/g 的 【所 有 】 子 字符 串 。saying.match(re01).length 会 返回 此 数组 实例 中 的 字符 串 
元 素 的 个 数 4。 

console.log(saying.startsWith('Jo')) »; 

saying.startsWith('Jo") 会 返回 true， 代 表 变 量 saying 的 数据 字符 串 ， 是 由 子 字符 串 Jo' 开 头 的 。 


console.10g('') ; 


console.log(saying.startsWith('lov')) ; 

saying.startsWith("lov') 会 返回 lse， 代表 变量 saying 的 数据 字符 串 ， 并 不 是 由 子 字符 串 Jo' 开 头 
的 。 

console.1og(saying.startsWith('lov', saying.indexOf('lovingly'))) ; 

saying.indexOfl'lovingly”) 返 回 索 引 值 7， 代 表 子 字符 串 'lovingly'"， 出 现在 变量 saying 的 数据 字 
符 串 里 的 索引 位 置 7。saying.startsWith('lov', saying.indexOft'lovingly')) 返 回 true， 是 因为 从 索引 位 置 
7 开始 ， 到 末尾 的 子 字符 串 'lovingly loves lovely beloved of Jason.',， 是 由 子 字符 串 'lov' 开 头 的 。 


Console.1log('') ; 


console.log(saying.endsWith('red')) ; 


saying.endsWith('ed') 返 回 false， 代 表 变 量 saying 的 数据 字符 串 ， 并 不 是 由 子 字符 串 'ed' 结 尾 的 。 
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saying.endsWith('on.) 返 回 true， 代 表 变 量 saying 的 数据 字符 串 ， 是 由 子 字 符 串 'on.' 结 尾 的 。 


Saying.includes(Jason) 返 回 true， 代 表 变 量 saying 的 数据 字符 串 ， 内 含 子 字符 串 'Jason'。 


7.1.3 ， 子 字符 串 的 获取 


考 欲 在 特定 字符 串 里 ， 获 取 特 定 索引 位 置 开 始 的 某 一 段子 字符 串 ， 可 以 使 用 String 对 象 实例 
支持 的 3 个 函数 之 一 ， 即 slice()、substring() 与 substr0。 下 面 通过 有 具体 示例 来 说 明 这 3 个 函数 的 调 
用 方式 。 


【7-1-3-sub-string-gettingsjs】 


第 7 章 “处 理 字符 串 | 195 


Piece01 = saying.slice(-5, -1) ; 
piece02 = saying.substring(31, 35) ; 
piece03 = saying.substr(31, 4) ; 


console.1log (piece01) ; 
console.1log (piece02) ; 
console.log (piece03) ; 


【相关 说 明 】 


let saying = 'Do one thing at a time, and do well.' ; 
声明 初始 数据 为 字符 串 的 变量 saying。 


let piece01 
let piece02 
let piece03 


saying.slice(0, 12) ; 
saying.substring(0, 12) ; 
saying.substr (0, 12) ; 

在 这 3 个 语句 的 等 号 右 侧 ， 均 会 被 返回 子 字 符 串 'Do one thing'， 并 赋 给 等 号 左 侧 的 变量 。 
saying.slice(0, 12) 的 含义 ， 是 在 变量 saying 的 字符 串 'Do one thing at a time, and do well' 里 ， 截 取 索 
引 位 置 【0】 到 【12 - 1】 的 子 字符 串 'Do one thing'。saying.substring(0, 12) 的 含义 ， 是 在 变量 saying 
的 字符 串 里 ， 截 取 索 引 位 置 【0】 至 【12 - 1】 的 子 字符 串 'Do one thing'。saying.substr(0, 12) 虽 然 也 
返回 'Do one thing'， 但 是 含义 有 所 不 同 ， 是 指 在 变量 saying 的 字符 串 里 ， 从 索引 位 置 【0】 的 位 置 ， 
向 后 截取 【12 个 】 字 符 的 子 字符 串 'Do one thing'。 

console.1log(Piece01) ; 

console.log (Piece02) ; 


console.log (piece03) ; 
console.1log('') ; 


let start = saying.indexOf(',') ; 

此 语句 声明 了 初始 数值 为 【saying.indexOf(',) 返 回 的 索引 值 22】 的 变量 start。 
let end = saying.indexOf ('.') ; 
此 语句 声明 了 初始 数值 为 【saying.indexOf(.) 返 回 的 索引 值 35】 的 变量 end。 


// piece01 = saying.slice(start + 2，end) ; 


此 语句 车 被 开放 之 后 ，saying.slice(start + 2, end) 当 前 等 价 于 saying.slice(24, 35), 会 返 
串 'and do well'。 


b=] 
民 
窑 


piece01 = saying.slice(start + 2，-1) ; 


saying.slice(start + 2, -1) 当 前 等 价 于 saying.slice(24, -1)， 也 会 返回 子 字符 串 'and do well'。 其 中 ， 
函数 slice() 的 第 2 个 参数 的 数值 -1， 代 表 倒数 第 2 个 〈-1 -1) 字符 的 索引 位 置 。 若 为 -2， 则 代表 倒 
数 第 3 个 〈-2 -1) 字符 的 索引 位 置 ， 以 此 类 推 。 


piece02 = saying.substring(start + 2, end) ; 


saying.substring(start + 2, end) 当 前 等 价 于 saying.substring(24, 35)， 亦 返回 子 字 符 串 'and do well'。 


piece03 = saying.substr(start + 2, end - start - 2) ; 


saying.substr(start + 2, end-start-2) 当 前 等 价 于 saying.substr(24, 11)， 返 回 子 字符 串 'and do well'。 
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console.log (piece01) ; 
console.log (piece02) ; 
console.log (piece03) ; 
console.10g('') ; 


piece01 = saying.slice(start + 2) ; 


saying.slice(start + 2) 当 前 等 价 于 saying.slice(24, 36)， 返 回 子 字符 串 'and do well.'。 


piece02 = saying.substring(start + 2) ; 


saying.substring(start + 2) 当 前 等 价 于 saying.substring(24, 36)， 也 返回 子 字符 串 'and do well.'。 


piece03 = saying.substr(start + 2) ; 


saying.substr(start + 2) 当 前 等 价 于 saying.substr(24, 12)， 亦 返回 子 字 符 串 'and do well.'。 


console.log (piece01) ; 
console.log (piece02) ; 
console.log (piece03) ; 
console.10g('') ; 


Piece01 = saying.slice(-5, -1) : 
saying.slice(-5, -1) 返 回 【 从 最 后 第 5 个 开始 ， 至 倒数 第 2 个 (-1 - 1) 字符 】 的 子 字 符 串 'well'。 
piece02 = saying.substring(31, 35) ; 


saying.substring(31, 35) 也 返回 子 字 符 串 'well'。 


piece03 = saying.substr(31, 4) ; 


saying.substr(31, 4) 亦 返回 子 字 符 串 "well'。 


7.1.4 ” 子 字符 串 的 替换 


若 欲 在 特定 字符 串 里 ， 替 换 其 中 一 段 或 者 符合 特定 模式 (pattern) 的 子 字符 串 ， 成 为 新 的 子 字 
符 串 ， 则 可 调用 String 对 象 实例 所 支持 的 函数 replace()。 下 面 通过 有 具体 的 示例 ， 来 说 明子 字符 串 的 
替换 运用 。 

【7-1-4-sub-string-replacements.js】 


let str01 = ' Dread can trap you, but optimism can release you. ';，; 


let sentence = str01l.replace(/\s{2,}/g, ' '); 
console.log (sentence) ; 
sentence = sentence.replace(/^\sl\s$/g, '') ; 


console.log(sentence) ; 
console.1log('') ; 


MAA 
// let re01 = /(Dread) [a-z J]+(optimism)/ ; 
let re01 = /(D) (read) ([\w\s,]+) (0) (ptimism)/ ; 
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sentence = sentence.replace (re01，'0$5$3d$S2') ; 


console.log(sentence) ; 


【相关 说 明 】 

let str01 = ' Dread can trap you, but optimism can release you. ' ; 
声明 初始 数据 为 字符 串 的 变量 str01。 

let sentence = str0l.replace(/\s{2,}/g, ' '); 


此 语句 声明 了 变量 sentence, 其 初始 数据 为 str01.replace( 人 s{2,}/g, '') 所 返回 的 字符 串 ' Dread can 
trap you, but optimism can release you. '。str01.replace(\s{2,}/g, ' ) 在 变量 str01 的 数据 字符 串 中 ， 取 
代 至 少 2 个 【连续 】 的 空白 字符 ， 成 为 【单一 】 空 格 字符 。 正 则 表达 式 字面 量 As{2,jg 代表 【所 有 
(g, global)】 至 少 2 个 ({2,}) 的 空白 字符 Qs) 。 其 中 , 空格 (space)、 制 表 符 (tab) 、 换 页 符 (form 
feed) 、 换 行 符 〈line feed) 、 回 车 符 (carriage retum) 均 是 空白 (whitespace) 字符 之 一 。 


console.log(sentence) ; 


sentence = sentence.replace(/^\s|l\s$/g, '') ; 


此 语句 将 sentence.replace(A\sl\s$/g,' ") 所 返回 的 字符 串 'Dread can trap you, but optimism can 
release you'， 赋 给 变量 sentence 本 身 。sentence.replace(/A\s|\s$/g, '') 使 得 在 变量 sentence 的 数据 字符 
串 ， 被 取代 (replace) 开头 〈AA\s ) 与 结尾 〈\s$) 的 空白 字符 。 

console.log(sentence) ; 


console.1log('') ; 


// let re01 = /(Dread) [a-z ]+(optimism)/ ; 
let re01 = /(D) (read) ([\w\s,]+) (0) (ptimism)/ ; 
此 语句 声明 了 初始 数据 为 正则 表达 式 字 面 量 /D)(read)([\w\s,]+)(o)(ptimismy/ 的 变量 re01。 在 正 
则 表达 式 字面 量 /(D)(read)([\w\s,]+)(o)(ptimism)/ 中 ， 存 在 5 组 小 括号 ， 可 分 别 通 过 $1、$2、$3、$4 
与 $5， 来 表示 其 【交换 位 置 】 的 身份 。 
$1 对 应 子 字 面 量 【(D)】 的 部 分 ， 用 来 匹配 字符 'D'。 
$2 对 应 子 字 面 量 【(read)】 的 部 分 ， 用 来 匹配 字符 囊 'read'。 
$3 对 应 子 字面 量 【([\w\s,]+)】 的 部 分 ， 当 前 则 匹配 到 字符 囊 ' can trap you, but '。 
$4 对 应 子 字面 量 【(o)]】 的 部 分 ， 用 来 匹配 字符 'o'。 
$5 对 应 子 字面 量 【(ptimism)】 的 部 分 ， 用 来 匹配 字符 串 ptimism 。 
其 中 ， 在 子 字面 量 【[\w\s,]+】 里 : 
【\w] 代表 1 个 a~z、A~Z、0~ 9、 下 画 线 字符 。 
【\s]】 代表 1 个 空白 字符 。 
【,】 代 表 1 个 过 号 字符 。 
【[\w\s,]+】 代 表 至 少 为 1 个 上 述 字符 之 一 。 


sentence = sentence.replace (re01, '0$5$3d$2°') ; 
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此 语句 将 sentence.replace(re01, 'O$5$3d$2) 所 返回 的 字符 串 'Optimism can trap you, but dread 
can release you.', 可 变量 sentence 本 身 。 值 得 注意 的 是 ， 子 字符 串 'Dread' 和 'optimism' 在 整体 字符 
串 所 在 的 位 置 ， 已 经 被 交换 了 。 字 面 量 '0$5$3d$2' 暗 示 着 要 重新 组 合 各 部 分 的 子 字符 串 。 其 中 : 


ee $5 代表 子 字符 囊 'ptimism'。 
@ ”$3 代表 子 字符 串 'can trap you, but '。 
”$2 代表 子 字符 串 read'。 


因此 ， 字 面 量 '0$5$3d$2' 使 得 原来 的 字符 串 'Dread can trap you, but optimism'， 被 重新 组 合成 为 
新 的 字符 串 'Optimism can trap you, but dread'。 


7.1.5 字符 串 的 大 小 写 转换 


欲 将 特定 字符 串 中 的 所 有 字母 ， 转 换 成 大 写字 母 ， 可 调用 String 对 象 实例 所 支持 的 函数 
toUpperCase(); 反之 ， 则 调用 函数 toLowerCase()。 下 面 通过 示例 介绍 字符 串 大 小 写 转换 的 运用 。 


【7-1-5-String-toUpperCase-and-toLowerCase.js】 


let str01 = 'nelson' ; 
let name01 = str01[0] .toUpperCase() + str01.slice(1) ; 


console.log(str01) ; 
console.log (name01) ; 
console.10og('') ; 


/LA/ 
let str02 = 'ALEXANDER' ; 


let name02 = str02[0] + str02.slice(1) .toLowerCase() ; 


console.log(str02) ; 
console.log (name02) ; 


【相关 说 明 】 

let str01 = 'nelson' ; 

声明 初始 数据 为 字符 串 的 变量 str01。 

let name01 = str01[0] .toUpperCase() + str01.slice(1) ; 

此 语句 声明 了 变量 name01， 其 初始 数据 为 【变量 str01 的 字符 串 'nelson', 被 设置 第 1 个 字母 成 
为 大 写 】 之 后 的 字符 串 '"Nelson'。 


console.log(str01) ; 
console.log (name01) ; 
console.1log('') ; 


let str02 = 'ALEXANDER' ; 


声明 初始 数据 为 字符 串 的 变量 str02。 
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let name02 = str02[0] + str02.slice(1) .toLowerCase() ; 


此 语句 声明 了 变量 name02， 其 初始 数据 为 【变量 str02 的 字符 串 ALEXANDER'， 仅 仅 被 保留 
第 1 个 字母 为 大 写 】 之 后 的 字符 串 'Alexander 。 


7.1.6 不 同 字符 串 的 连接 


连接 多 个 字符 串 时 ， 除 可 简单 通过 加 号 运算 符 【+】 来 串联 1 个 以 上 的 字符 串 之 外 ， 还 可 通过 
调用 String 对 象 支持 的 函数 concat0) 或 者 Array 对 象 支持 的 函数 join() 来 完成 。 请 看 下 面 的 示例 。 
【7-1-6-String-concat.js】 


let prefix = 'Lucky numbers: ' ; 
let numbers = Array.from(new Array(6), () => parseInt (100 * Math.random()) + ' '); 
let message = prefix.concat(... numbers) ; 


console.log (message) ; 
message = prefix + numbers.join('') ; 


console.log (message) }; 


【相关 说 明 】 


let prefix = 'Lucky numbers: ' ; 

声明 初始 数据 为 字符 串 的 变量 prefix。 

let numbers = Array.from(new Array(6), () => parseInt (100 * Math.random()) + ' '); 

此 语句 声明 了 变量 numbers， 其 初始 数据 为 数组 实例 ， 例 如 【Array.from(new Array(6), () => 
parseInt(100 * Math.random()) +'")】 所 产生 的 数组 实例 ["47 ", "77 ", "43 ", "83 ", "85 ", "64 "]， 并 且 
内 含 6 个 带 有 0 ~ 100 的 整数 值 的 字符 串 。 

let message = prefix.concat(... numbers) ; 

此 语句 声明 了 变量 message， 其 初始 数据 为 prefix.concat(... numbers) 所 返回 的 字符 串 。 
prefix.concat(... numbers) 可 串联 (concate) 变量 prefix 的 数据 字符 串 'Lucky numbers: '， 以 及 从 语法 
【... numbers 扩展 出 来 的 多 个 字符 串 。 若 变量 numbers 的 数组 实例 为 ["47 ", "77 ", "43 ", "83 ", "85"， 
"64 "], 则 【prefix.concat(.… numbers)】 等 价 于 【'Lucky numbers: .concat("47 ", "77 ", "43 ", "83 " "85 
"64")】， 会 返回 字符 串 'Lucky numbers: 47 77 43 83 85 64 '。 


console.log (message) ; 


message = prefix + numbers.join('') ; 


prefix + numbers.join(") 可 返回 字符 串 'Lucky numbers: 47 77 43 83 85 64 '。 数 组 实例 支持 的 函数 
join()， 可 将 变量 numbers 的 数组 实例 ["47 ", "77 ", "43 ", "83 ", "85 ", "64 "] 中 的 各 字符 串 ， 不 以 任 
何 字符 加 以 分 隔 ， 并 连接 (join) 成 为 新 字符 串 47 77 43 83 85 64'。 若 是 numbers.join(/)， 则 会 返 
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可 字符 串 '47/77/43/83/85/64/"。 


be 


7.1.7 ”字符 串 的 重复 连接 


如 果 要 进行 特定 字符 串 的 重复 连接 ， 可 调用 String 对 象 实例 所 支持 的 函数 repeat()。 请 看 下 面 
的 示例 。 
【7-1-7-string-repeatings.js】 


let space = "' '，} 

let comma = "vv ; 

let name = 'Alex' ; 

let greeting = 'how are you today?' ; 
let smile = '=^.^e' } 


let sentence = name + comma + space + greeting + space.repeat (5) + smile ; 
console.log(sentence) ; 


【相关 说 明 】 

let space = '; 

声明 初始 数据 为 空格 字符 的 变量 space。 
let comma = 1,'; 

声明 初始 数据 为 逗号 字符 的 变量 comma。 
let name = 'Alex' ; 

声明 初始 数据 为 字符 串 'Alex' 的 变量 name。 


let greeting = 'how are you today?' ; 


声明 初始 数据 为 字符 串 'how are youtoday?' 的 变量 greeting。 

let smile = '=^.^=' 7 

声明 初始 数据 为 字符 串 '=^ 人 ^=' 的 变量 smile。 

let sentence = name + Comma + Space + greeting + space.repeat (5) + Smile ; 

此 语句 声明 了 初始 数据 为 组 合 之 后 的 字符 串 'Alex, how are you today? =^ 作 "的 变量 
sentence。 通 过 运算 符 【+】， 可 串联 两 个 字符 串 。spacerepeat(5) 会 使 得 变量 space 所 代表 的 空格 字 
符 ''"， 被 重复 (repeat) 5 次 而 返回 ' '。 


7.1.8 字符 串 的 分 割 


如 果 要 分 割 特定 字符 串 ， 成 为 多 个 子 字符 串 ， 并 放 入 新 数组 实例 中 ， 则 可 调用 String 对 象 实 
例 支持 的 函数 split()。 可 参看 下 面 的 例子 。 
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【7-1-8-string-splitting.js } 


let str01 
let str02 


”10，20 , 50 ,40 


let arr01 = str01.split(',') ; 


console.log(arr01) ; 


arr01 = 


str01.split(',', 5) ; 


console.log(arr01) ; 
console.1log('') ; 


xe 


'10,20, 50, 40,70, 90,80,30,60°" ; 


70 0 GO 0 7 00 A 


let arr02 = str02.replace(/ /g, '').split(',') ; 


console.log(arr02) ; 
console.10g('') ; 


arr02 = 


str02.replace(/^\s*|\s*$/g, '').split(/\s*,\s*/) ; 


console.log(arr02) ; 


【相关 说 明 】 


let str01 = '10,20,50,40,70,90,80,30,60' ; 
let str02 = ' 10, 20, 50 ,40 


这 两 个 语句 分 别 声 明了 初始 数据 为 不 同 字符 串 的 变量 str01 和 str02。 
let arr01 = str01.split(',') ; 


此 语句 声明 了 变量 arr01， 其 初始 数据 为 str01.split(,) 所 返回 的 数组 实例 。str01.split(,) 可 根据 
被 传 入 的 分 隔 符 (seperator)',, 加 以 分 割 (split) 变量 str01 的 数据 学 符 串 '10,20,50,40,70,90,80,30,60'， 


成 为 被 返 


console.log(arr01) ; 


arr01 = 


此 语句 将 str01.split(,', 5) 所 返 区 
分 隔 符 ,",， 加 以 分 割 变量 str01 的 数据 字符 串 '10,20,50,40,70,90,80,30,60' 的 前 5 个 项 目 ， 成 为 被 返 


str01.split(',', 5) ; 


Oe OR DO WO D 


的 数组 实例 ["10", "20", "50", "40", "70", "90", "80", "30", "60"]。 


的 数组 实例 ， 赋 给 变量 ar01。str01.split(,', 5) 可 根据 被 传 入 的 


的 数组 实例 ["10", "20", "50", "40", "70"]。 


console.log(arr01) ; 


console.10g('') ; 


let arr02 = str02.replace(/ /g, '').split(',') ; 


此 语句 声明 了 初始 数据 为 新 数组 实例 的 变量 arr02。 其 中 , str02.replace(/ /g, ") 会 返回 【变量 str02 


的 数据 字符 


B' 10.20 .50 .40 ,70， 


90，80 ，30 ， 60  '， 被 去 除 所 有 空格 字符 】 之 后 的 


新 字符 串 '10,20,50,40,70,90,80,30,60'。 新 字符 串 青 经 过 split(,) 的 处 理 ， 被 分 割 成 新 数组 实例 ["10"， 
"20" "50", "40", "70" "90" "80" "30", "60"]。 
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console.1log (arr02) ; 
console.10g('') 


arr02 = str02.replace(/^\s*|\s*$/g, '').split(/\s*,\s*/) ; 
此 语句 重新 设置 变量 arr02 的 数据 ,成 为 另 一 新 数组 实例 。str02.replace(As#|\s*$/g, ") 会 返回 【 变 
量 str02 的 数据 字符 串 '10, 20 ,50 ,40,70，90，80 ，30  ， 60 ', 被 去 除开 头 与 结尾 的 
空白 字符 】 之 后 的 新 字符 串 '10, 20 , 50 ,40 , 70 ，90，80 ，30  ， 60'。 新 字符 串 再 经 过 
split(As*\s*/) 的 处 理 ， 根 据 正则 表达 式 字 面 量 形式 的 分 隔 符 【As*\s*/】， 进 一 步 被 分 割 成 为 新 数组 
实例 ["10", "20", "50", "40", "70", "90", "80", "30", "60"]。 
replace(/As#|\s*$/g, ") 用 来 取代 (replace ) 开头 或 末尾 的 所 有 连续 空白 字符 ,成 为 空 字符 "。 换 言 之， 
就 是 去 除 包括 空格 (space) 字符 在 内 的 开头 与 末尾 的 所 有 空白 (white-space 字符 。 其 中 : 
【^】〗 具 有 开头 的 含义 。 
【$] 具 有 末尾 的 含义 。 
【g】 具 有 全 局 (global ) / 所 有 的 含义 。 
【|]〗 具 有 逻辑 或 (logical or ) 的 含义 。 
【*】 具 有 无 和 至 少 1 个， 也 就 是 可 能 存在 至 少 1 个 的 含义 。 
【As*〗 代 表 开 头 可 能 存在 至 少 1 个 的 连续 空白 字符 。 
【\s*$】〗 代 表示 尾 可 能 存在 至 少 1 个 的 连续 空白 字符 。 
split(As*,\s*/) 根 据 正 则 表达 式 字 面 量 【As*\s*/】 所 代表 的 【至 少 1 个 的 连续 空白 字符 ,至 少 1 
个 的 连续 空白 字符 7 的 复合 式 分 隔 符 , 例如 ',' ， 下 ” ,等 ,以 分 割 (split) 字 符 串 '10, 20 ,50 ,40 ， 
70，90，80 ，30  ， 60', 成 为 新 数组 实例 ["10", "20", "50", "40", "70", "90", "80", "30", "60"] 。 


7.1.9 特定 字符 和 Unicode 数码 的 双向 转换 (ES6) 


可 被 显示 在 计算 机 界面 上 的 ， 无 论 是 英文 字母 、 数 字 或 符号 等 字符 (character) 还 是 中 文字 ， 
均 可 对 应 到 Unicode 字符 集 里 的 特定 数码 。JavaScript 语言 支持 【Unicode 字符 集 里 的 数码 与 可 显 
示 的 字符 】 的 双向 转换 。 下 面 通过 具体 的 示例 来 加 以 调试 。 

【7-1-9-codes-of-strings.js】 


let name = ' 柯 霖 廷 ' ; 
let str = 'abcdefg' ; 


console.log (name .charCodeAt (0)) ; 
console.log (name.codePointAt (0)) ; 
console.10g('') ; 


console.log(name[0]) ; 

console.log (name.charAt (0)) »; 

console.1log (String.fromCodePoint (26607)) ; 
console.1log (String.fromCharCode (26607)) ; 
console.10g('') 


console.log(str.charCodeAt (1)) ; 
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console.1og(str.codePointat (1)) ; 
Console.1log('') ; 


console.log(str[1]) 
console.1log(str.charAt (1)) ; 
console.1og (String.fromCodePoint (98)) ; 
console.1og (String.fromCharCode (98)) ; 
console.1log('') ; 


【相关 说 明 】 

let name = ' 柯 霖 廷 ' ; 

声明 初始 数据 为 字符 串 的 变量 name。 

let str = 'abcdefg' ; 

声明 初始 数据 为 字符 串 的 变量 str。 

console.log (name.charCodeAt (0)) ; 

因为 变量 name 的 数据 为 中 文字 符 串 ' 柯 霖 廷 '， 所 以 name.charCodeAt(0) 会 返 
【UTF-16】 编 码 单元 中 的 数码 26607。 

在 UTF-16 编码 单元 中 ， 其 数码 的 范围 仅 介 于 0~ 65536。 


console.log (name .codePointRt (0)) ; 


中 文字 ' 柯 ' 在 


name.codePointAt(0) 会 返回 中 文字 ' 柯 ' 在 【Unicode 】 编 码 单 元 中 的 数码 26607。 在 Unicode 编 
码 单元 中 ， 其 数码 可 超过 65536， 以 表示 更 多 文字 。 因 为 数码 26607 并 未 大 于 65536， 所 以 可 看 出 
中 文字 ' 柯 在 【UTF-16】 和 【Unicode】 编 码 单元 的 数码 ， 均 是 相同 的 26607。 


console.1l0og('') ; 


console.log (name [0]) ; 
console.log (name .charAt (0)) ; 


name[0] 和 name.charAt(0) 具 有 相同 的 效果 ， 均 会 返回 变量 name 字符 串 的 第 1 个 中 文字 ' 柯 '。 


console.log (String.fromCodePoint (26607)) ; 


String 对 象 支持 的 函数 fomCodePoint(26607)， 会 根据 【Unicode】 编 码 单元 ， 返 回 被 传 入 的 数 
码 26607 所 对 应 的 文字 ' 柯 '。 

console.log (String.fromCharCode (26607)) ; 

String 对 象 支持 的 函数 fomCharCode(26607)， 会 根据 【UTF-16】 编 码 单元 ， 返 回 被 传 入 的 数 


码 26607 所 对 应 的 文字 ' 柯 '。 


console.10g('') ; 


console.log (str.charCodeAt (1)) ; 


因为 变量 str 的 数据 为 字符 串 'abcdefg'， 所 以 str.charCodeAt(1) 会 返回 字符 b' 在 【UTF-16)】 编码 
单元 中 的 数码 98。 


console.log (str.codePointAt (1)) ; 
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因为 变量 str 的 数据 为 字符 串 'abcdefg'， 所 以 str.CodePointAt(1) 会 返回 字符 'b' 在 【Unicode】 编 
码 单元 中 的 数码 98。 


console.10g('') ; 


console.log (str[1]) 
console.log(str.charAt (1)) ; 


str[1] 和 str.charAt(1) 具 有 相同 的 效果 ， 均 会 返回 变量 str 字符 串 的 第 2 个 字符 'b'。 

console.1log (String.fromCodePoint (98)) ; 

String 对 象 支持 的 函数 fromCodePoint(98)， 会 根据 【Unicode】 编 码 单元 ， 返 回 被 传 入 的 数码 
98 所 对 应 的 文字 'b'。 

console.1log(String.fromCharCode (98)) ; 

String 对 象 支持 的 函数 fromCharCode(98)， 会 根据 【UTF-16】 编 码 单元 返回 被 传 入 的 数码 98 
所 对 应 的 文字 'b'。 


7.1.10 重复 填充 子 字符 串 于 扩充 后 的 字符 串 中 〈ES8) 


如 果 欲 在 扩充 之 后 的 特定 字符 串 里 ， 重 复 填 充 新 的 子 字符 串 ， 可 调用 String 对 象 实例 支持 的 
函数 padStart() 来 实现 。 请 看 下 面 的 示例 。 
【7-1-10-String-padStartjs】 


let word01 = 'Happy ', word02 = ' Birthday' ; 
let num = 567 ; 


console.log(word01 + '^v^'.repeat(3) + word02.padstart(17, ' _')); 
console.1log('') ; 


console.1log (num.toString().padStart (16, '0')) ; 


【相关 说 明 】 

let word01 = 'Happy ', word02 = ' Birthday' ; 

此 语句 分 别 声明 了 初始 数据 为 不 同 字 符 串 的 变量 word01 与 word02。 

let num = 567 ; 

声明 初始 数值 为 567 的 变量 num。 

console.log (word01 + '^v^'.repeat (3) + word02.padstart(17, ' _ _')); 


vsrepeat(G3) 会 产生 字符 串 vvAAVA。 word02.padStart(17,' 会 先 根据 变量 word02 的 字符 


串 ' Birthday' 的 字符 个 数 9， 以 重复 产生 子 字 符 串 '__'， 直 到 完成 17 - 9， 也 就 是 字符 个 数 为 8 的 字 
符 串 '___“"， 再 衔接 到 字符 串 ' Birthday'， 成 为 字符 个 数 为 17 的 字符 串 ' ____ Birthday'。 因 此 ， 
word01 + 'vALrepeat(3) + word02.padStart(17,' __")， 最 终 会 返回 字符 串 Happy ^vAAvAAAA _ 
Birthday'。 


console.10g('') ; 


在 此 语句 中 ， 先 由 num.toString0 返 回 变量 num 的 整数 值 567 被 转换 之 后 的 字符 串 '567'， 再 由 
padStart(16, '0)， 返 回 字符 个 数 为 16 的 字符 串 '0000000000000567'。 


7.2 ”将 元 长 的 字符 串 分 割 为 多 行 (ES6 ) 


在 编程 时 ， 分 割 元 长 的 字符 串 到 多 行 里 ， 有 助 于 舒缓 编程 人 员 的 视觉 负担 。 下 面 请 看 具体 的 
示例 。 


【7-2---multiple-rows-of-strings.js 
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【相关 说 明 】 


let saying = 'Reading enriches our mind; conversation polishes it.' ; 
声明 初始 数据 为 字符 串 的 变量 saying。 


console.log (saying) ; 


saying = ['Reading', 'enriches', ‘'our', "mind;', 'conversation', 'polishes', 
WD le LT BS 


此 语句 将 数组 实例 内 的 多 个 字符 串 ， 连接 (join) 成 为 完整 的 字符 串 'Reading enriches our mind; 
conversation polishes it'， 并 赋 给 变量 saying。 

console.log(saying) ; 

saying = 'Reading enriches our mind; ' + 'conversation polishes it.' ; 

此 语句 将 两 个 子 字符 串 ， 串 联 成 为 新 的 字符 串 ， 再 赋 给 变量 saying。 


console.log(saying) ; 


saying = 'Reading enriches our mind; \ 
conversation polishes it.' ; 


通过 反 斜 杠 符 号 【\】， 可 跨 多 行 地 描述 一 个 字符 串 。 需 特别 注意 的 是 ， 在 【\】 的 右 侧 ， 不 可 
再 有 包括 任何 空白 字符 在 内 的 字符 。 此 语句 等 价 于 将 字符 串 'Reading enriches our mind; conversation 
polishes it"， 赋 给 变量 saying。 


console.log(saying) ; 


saying = 'Reading \ 
enriches \ 

our \ 

mind; \ 
conversation \ 
polishes \ 

it, 3 


此 语句 通过 反 斜 杠 符号 【\】， 衔 接 跨 多 行 的 字符 串 'Reading enriches our mind; conversation 
polishes it"， 并 赋 给 变量 saying。 


console.log(saying) ; 


saying = ‘Reading 
enriches 

our 

mind; 

conversation 

polishes 

ts eplit( \n) oint ty 


在 此 语句 中 ， 其 等 号 右 侧 的 字符 串 ， 通 过 一 对 反 引 号 (back quote) 【`】, 来 保留 其 换行 的 效 
果 。 然 后 借助 函数 split\n')， 以 根据 换行 字符 【\n】， 来 分 割 成 为 各 个 子 字符 串 ， 并 组 成 新 数组 实 
例 ["Reading", "enriches", "our", "mind;", "conversation", "polishes", "it."]， 再 交 给 函数 join(' ) 来 处 理 ， 
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重新 将 数组 实例 中 的 各 字符 串 ， 组 合成 为 最 终 的 字符 串 "Reading enriches our mind; conversation 
polishes it."。 


7.3 ”字符 串 的 扩展 运算 (ES6 ) 


通过 扩展 运算 符 (spread operator) 【.…】 和 中 括号 运算 符 ]， 可 打 散 特定 字符 串 ， 成 为 在 新 数 
组 实例 中 的 字符 〈character) 。 
【7-3---string-spreadings.js】 
let alphabet string = "abcdefghijklmnopqrstuvwxyz' ; 


let letters = [... alphabet string.toUpperCase()] ; 


console.log(alphabet string) ; 
console.log(letters) ; 


【相关 说 明 】 

let alphabet_string = 'abcdefghijklmnopqrstuvwxyz' ; 

声明 初始 数据 为 字符 串 'abcdefghijklmnopqrstuvwxyz 的 变量 alphabet_string。 

let letters = [ ... alphabet_string.toUPPerCase() ] ; 

此 语句 声明 了 初始 数据 为 数组 实例 的 变量 letters。 其 中 ，alphabet_string.toUpperCase() 可 使 得 
变量 alphabet string 的 数据 字符 串 ， 被 转换 成 为 全 部 为 大 写字 母 的 字符 虽 
"ABCDEFGHUKLMNOPQRSTUVWXYZ"。 通 过 扩展 运算 符 【.…】， 让 这 个 字符 串 被 扩展 在 一 组 中 
括号 [] 当 中 ， 成 为 内 含 多 个 字符 的 数组 实例 ["A", 4 SC MD HR | Wr "H", wn vy 出 i 
"M", "N", "On "Pp", "Q", "R", "8", "To Un VW, X,Y", ZI]。 


7.4 字符 串 的 插值 格式 化 (ES6 ) 


通过 加 号 运算 符 【+]】 或 函数 concat0)， 连 接 各 字符 串 的 任务 ， 是 相当 烦琐 的 。 不 过 ，JavaScript 
语言 支持 更 为 简单 的 操作 方式 : 
@ 在 一 对 反 引 号 【`】 中 ， 植 入 带 有 插值 (interpolation ) 用 途 的 各 个 子 字 符 串 【${ 变 量 名 称 或 表 
达 式 }】， 而 成 为 模板 (template ) 字符 串 。 
®@ 再 将 上 述 模板 字符 串 ， 赋 给 特定 变量 。 


上 述 模板 字符 串 ， 被 转换 完成 之 后 ， 其 变量 的 数据 ， 自 然 会 变 成 最 终 的 字符 串 。 关 于 字符 串 
插值 格式 化 的 运用 ， 请 看 下 面 的 例子 。 
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【7-4---string-interplation-formattings.js 】 


let subject = 'Jasper' ; 
let object = 'Jessica' ; 


let sentence = `“${subject} lovingly loves lovely beloved of S${object}.. ; 


console.log(sentence) ; 
console.1log('') ; 


1// 
String.prototype.format = function () 
{ 

let origin string = this.valueOf() ; 


console.1og (arguments) ; 


for (let prop in arguments) 
{ 


origin string = origin string.replace(“{${prop}}’, arguments[prop]) ; 


} 


return origin string ; 
六 


sentence = '{0} lovingly loves lovely beloved of {1}.'.format (subject, object) ; 


console.log(sentence) ; 


【相关 说 明 】 


let subject = 'Jasper' ; 
let object = 'Uessica' ; 


这 两 个 语句 分 别 声 明了 初始 数据 为 不 同 字 符 串 的 变量 subject 与 object。 


let sentence = “${subject} lovingly loves lovely beloved of ${object}.. ; 


此 语句 声明 了 变量 sentence， 其 初始 数据 为 字符 串 'Jasper lovingly 


loves lovely beloved of 


Jessica.'。 插值 是 通过 【${ 变 量 名 称 } 的 形式 , 结合 一 般 文 本 之 后 , 被 放置 于 一 对 反 引 号 (back quote) 
【`】 中 的 字符 串 里 。 模 板 字 符 串 【`$ {subject} lovingly loves lovely beloved of ${fobject}…】 经 过 处 理 
之 后 ， 会 产生 出 最 终 的 字符 串 'Jasper lovingly loves lovely beloved of Jessica.'。 


console.log(sentence) ; 
console.1og('') ; 


String.prototype.format = function () 
{ 


let origin string = this.valueof() ; 


内 置 的 局 部 变量 this, 被 使 用 于 自 定义 的 函数 String.prototype.format() 里 。 当 '{0} lovingly loves 


lovely beloved of {1}.".format(subject, object) 被 调用 时 ， 会 间接 让 其 内 部 的 


字符 串 '{0} lovingly loves lovely beloved of {1}.'】 的 String 对 象 实例 ， 进 而 使 得 this.valueOfO) 返 加 


局 部 变量 this， 指 向 内 含 
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String 对 象 实例 的 字符 串 '{0} lovingly loves lovely beloved of {1}.'。 所 以 ， 此 语句 声明 了 初始 数据 为 
字符 串 '{0} lovingly loves lovely beloved of {1}.' 的 局 部 变量 origin_string。 


console.1og (arguments) ; 


for (let prop in arguments) 


在 任意 函数 中 的 内 置 变量 arguments, 是 内 含 被 传 入 的 参数 数据 所 构成 的 数组 实例 。 举例 来 说 ， 
在 语法 【'{0} lovingly loves lovely beloved of {1}.".format(subject, object)】 中 ， 调 用 了 函数 format()， 
并 传 入 了 全 局 变量 subject 的 数据 字符 串 Jasper， 以 及 变量 object 的 数据 字符 串 'Jessica'， 使 得 内 团 
变量 arguments 当前 的 数据 ， 成 为 内 含 数组 实例 [Jasper,'Jessica] 的 Arguments 对 象 实例 。 
在 for.…in 的 第 1 次 迭代 时 ， 变 量 prop 的 数据 为 字符 '0'"， 并 不 是 数值 0; 在 其 第 2 次 迭代 时 ， 
变量 prop 的 数据 则 为 字符 '1， 而 不 是 数值 1。 
{ 


origin string = origin_string.replace(`{$fprop})`，arguments[Prop]) ; 


在 语法 【replace( {${prop}}`, arguments[prop])】 中 ， 模 板 字 符 串 【`{${prop}}"】 在 for.. in 的 
第 1 次 迭代 时 ， 被 置换 为 字符 串 '{0}'， 在 其 第 2 次 迭代 时 ， 则 会 被 置换 为 字符 串 '{1}'。 换 言 之 ， 在 
其 第 1 次 迭代 时 ，【 origin_string.replace('{${prop}}"，arguments[prop]) 】 会 被 置换 为 
【'origin_string.'.replace('{0}'，arguments[0])】， 并 等 价 于 【'"{0} lovingly loves lovely beloved of 
{1}.'.replace("{0}', Jasper)】， 使 得 变量 orgin_string 的 数据 ， 进 一 步 变 成 字符 串 'Jasper lovingly loves 
lovely beloved of {1}.'。 

在 其 第 2 次 迭代 时 ，【 origin_string.replace( {$f{prop}) ，arguments[prop]) 】 会 被 置换 为 
【origin_string.".replace('{1}'，arguments[1])】， 并 等 价 于 【'Jasper lovingly loves lovely beloved of 
{1}.'.replace('{1}', 'Jessica')】， 使 得 变量 orgin_string 的 数据 ， 最 后 变 成 字符 串 'Jasper lovingly loves 
lovely beloved of Jessica.'。 


} 


return origin string ; 


此 语句 返回 了 变量 origin_string 的 数据 字符 串 'Jasper lovingly loves lovely beloved of Jessica.'。 

PB 

通过 语法 【String.prototype.format = function () { .…} ;】， 可 动态 定义 任意 String 对 象 实例 即将 
支持 的 函数 format()。 

sentence = '{0} lovingly loves lovely beloved of {1}.'.format (subject, object) ; 

在 语法 【'{0} lovingly loves lovely beloved of {1}.'format(subject，object)】 中 ， 调 用 了 函数 
format(subject, object)， 并 返回 了 字符 串 'Jasper lovingly loves lovely beloved of Jessica.'。 
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7.5 原始 字符 串 (ES6 ) 


在 所 谓 的 原始 (raw) 字符 串 里 ， 其 控制 字符 (control character) ， 例 如 \f、'n'、'Mt 等 ， 均 不 

加 以 解析 ， 直 接 视 为 普通 字符 ! 如 果 欲 获取 原始 (raw) 字符 串 ， 可 按 如 下 步骤 操作 : 

步 又 014 在 一 对 反 引 号 【` 】 中 ， 植 入 带 有 插值 ( interpolation ) 用 途 的 各 个 子 字符 串 【 ${ 变 量 名 称 
或 表达 式 } ]， 以 作为 模板 ( template ) 字符 串 。 
步骤 024 在 模板 字符 串 的 前 方 ( 左 侧 ) 冠 上 【 String.raw 】 文 本 ， 代 表 以 特殊 方式 ， 调 用 String 对 
象 中 名 称 为 raw 的 函数 ， 例 如 【 String.raw“`。。。 ${ 变 量 名 称 或 表达 式 } co。。 ${ 变 量 名 称 或 表达 
式 } ae 

步骤 034 虽然 String.raw 被 称 为 函数 ， 但 是 衔接 带 有 一 对 反 引 号 【` 】 的 模板 字符 串 时 ， 千 万 不 可 
写成 【String.rawCoes。 ) 】 或 是 【 Stringraw(eso) 】 

步 最 044 将 模板 字符 串 ， 赋 给 特定 变量 。 

步骤 054 模板 字符 串 被 完成 之 后 ， 特 定 变量 的 数据 ， 就 会 变 成 最 终 的 原始 ( raw ) 字符 串 。 


关于 原始 字符 串 的 运用 ， 请 看 下 面 的 示例 。 


【7-5---raw-strings.js 


let amount = 7 /7 
let str01 = ‘There are\n ${amount} categories. ; 
let str02 = String.raw ‘There are\n ${amount} categories.. ; 


console.log(str01) ; 
console.log(str02) ; 


Tot te string roaw tlre "abode 

console.log(str03) ; 

str03 = String.raw({raw: "abcd'}j，... hh 

console.log(str03) ; 

let str04 = String.raw({raw: ['apple', 'banana', 'cherry', '']}, '=15, ', '=10,', '=18.'); 

console.log(str04) ; 

【相关 说 明 】 

let amount = 7 : 

声明 初始 数值 为 7 的 变量 amount。 

let str01 =“There are\n ${amount} categories. 

此 语句 声明 了 初始 数据 为 【模板 字符 串 `There arem ${famount} categories.” 所 产生 的 如 下 字符 
串 】 的 变量 str01: 


There are 


第 7 章 ”处 理 字符 串 | 211 


7 categories. 
let str02 = String.raw ‘There are\n ${amount} categories. ; 
此 语句 声明 了 初始 数据 为 【模板 字符 串 `There aren $famount} categories.” 所 产生 的 原始 字符 
串 'There are\n 7 categories.'】 的 变量 str02。 

在 原始 字符 串 里 ，【\n) 会 被 视 为 纯粹 的 字符 【\】 与 【n】 的 组 合 ， 不 再 具有 换行 (line feed) 
的 特征 。 
console.log(str01) ; 

此 语句 显示 出 如 下 信息 : 


There are 


7 categories. 
console.log(str02) ; 
此 语句 则 仅仅 显示 出 并 无 换行 的 【There are\n 7 categories.】 的 信息 。 


let str03 = String.raw({raw: 'abcd'}, i,'_, '_'); 


此 语句 声明 了 初始 数据 为 字符 串 'a_b_c_d' 的 变量 str03。 调 用 String 对 象 的 函数 raw( {raw: 'abcd'}， 
"50)， 可 使 得 字符 串 'abcd' 和 3 个 字符 串 ''， 被 交错 连接 成 为 新 的 字符 串 'a_b_c_d'。 


console.log(str03) ; 


str03 = String.raw({raw: 'abcd'}, ...' ta 


此 语句 将 字符 串 a_b_c_d' 赋 给 变量 str03。 调 用 String 对 象 的 函数 raw( {raw: 'abcd'},...'___")， 
等 价 于 调用 raw({raw: 'abcd'}, '', '_', '_')。 换 言 之 ， 单 一 参数 【...' '】， 通 过 扩展 运算 符 【..….】， 
可 被 扩展 成 为 3 个 参数 的 语法 【'_",'_",'_'】。 

console.log(str03) ; 


let str04 = String.raw({raw: ['apple', 'banana', 'cherry', '']}, '=15, ', '= 10, ', '= 18.') 

此 语句 声明 了 初始 数据 为 字符 串 'apple= 15, banana= 10, cherry= 18.' 的 变量 str04。 调 用 String 
对 象 的 函数 raw( {raw: ['apple', 'banana', 'cherry', "]}, = 15, ,= 10, ,= 18.)， 可 使 得 数组 实例 ['apple'， 
'banana', 'cherry', "] 中 的 各 字符 串 元 素 ， 和 3 个 字符 串 参 数 = 15,"、= 10,' 和 = 18.'， 被 交错 连接 成 
为 新 的 字符 串 'apple= 15, banana= 10, cherry= 18.'。 


7.6 正则 表达 式 与 秋 性 匹配 ( ES6 ) 


在 特定 字符 串 中 , 寻找 符合 特定 模式 (pattern ) 的 子 字符 串 的 操作 , 称 为 字符 串 的 匹配 Cmatch ) 。 
正则 表达 式 字 面 量 (regular-expression literal) 是 用 来 进行 字符 串 的 匹配 的 模式 字符 串 。 

在 JavaScript 语言 中 ， 会 自动 将 正则 表达 式 字 面 量 ， 转 换 成 为 RegExp 对 象 实例 ， 并 支持 内 置 
的 属性 lastIndex。 
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所 谓 的 黏 性 匹配 (sticky match) ， 是 指 在 特定 字符 串 中 ， 每 次 固定 从 属性 lastIndex 内 含 的 索 
引 值 (index value》 所 对 应 的 字符 位 置 开始 ， 进 行 仅仅 一 次 的 匹配 】。 换 言 之 ， 在 称 性 匹配 的 过 程 
中 ,前 述 索 引 值 对 应 的 字符 位 置 ,是 【唯一 】 会 被 进行 仅仅 一 次 的 匹配 的 开始 位 置 。 下 面 通过 示例 ， 
说 明正 则 表达 式 与 笑 性 匹配 的 运用 。 


【7-6---regular-expression-sticky-matches.js】 


【相关 说 明 】 
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声明 初始 数据 为 字符 串 'z1 =xl^2+yl1*3+6 的 变量 user_input。 


// var pattern = new RegExp(/[a-zA-Z]\d/, 'g') ; 
// var pattern = new RegExp(/[a-zA-2]\d/g) ; 
Var pattern = /[a-zA-Z2]\d/g ; 


此 语句 声明 了 初始 数据 为 正则 表达 式 字面 量 /[a-zA-Z]\d/g 的 变量 pattem。/[a-zA-Zj\d/g 用 来 匹 


配 所 有 〈g, global) 1 个 字母 〈[a-zA-Z]) 衔接 1 个 数字 〈\d) 的 组 合 ， 例 如 xl、yl1、zl 等 。 


Var matches = user input.match (pattern) ; 


user_input.match(pattern) 返 回 数组 实例 ["z1", "x1", "y1"]， 所 以 此 语句 声明 了 初始 数据 为 数组 实 
例 ["zl", "x1","y1"] 的 变量 matches。 其 中 ， 字 符 串 "z1"、"x1" 与 "y1", 均 是 在 变量 user_input 的 数据 


字符 串 'z1 = x1^2+yl*3+6' 里 ， 符 合 正则 表达 式 字 面 量 /[a-zA-Z]\d/g 的 模式 的 子 字符 串 。 


console.log (matches) ; 


matches = pattern.exec(user input) ; 


pattern.exec(user_input) 返 回 数组 实例 ["z1"]， 所 以 此 语句 将 内 含 单一 元 素 的 数组 实例 ["z1"]， 赋 
给 变量 matches。 其 中 , 字符 串 "z1" 是 在 变量 user_input 的 数据 字符 串 z1=xl^2+yl*3+6' 里 ， 符 


合 正则 表达 式 字面 量 /[a-zA-Zj\d/g 的 模式 的 第 1 个 子 字符 串 。 


console.log (matches) ; 


pattern.lastIindex = 1; 


因为 变量 pattem 当前 内 含 正则 表达 式 字 面 量 ， 所 以 支持 


属性 lastIndex。 此 语句 设置 了 变量 


pattern 的 属性 lastIndex 的 数值 为 1， 代表 在 变量 user_input 的 数据 字符 串 里 ， 从 其 索引 值 1 的 位 置 


开始 ， 向 后 进行 匹配 。 


matches = pattern.exec(user input) ; 


pattern.exec(user_input) 返 回 数 组 实例 ["x1"]， 所 以 此 语句 将 内 含 单一 元 素 的 数组 实例 ["x1"]， 赋 


给 变量 matches。 其 中 ， 字 符 串 "x1" 是 在 变量 user_input 的 数据 : 


符合 正则 表达 式 字面 量 /[a-zA-Zj\d/g 的 模式 的 第 2 个 子 字符 串 。 


console .1log (matches) ; 


pattern.lastIndex = 6 :; 


此 语句 设置 了 变量 pattern 的 属性 lastIndex 的 数值 为 6， 代表 在 变量 user_input 的 数据 字符 串 


里 


从 索引 值 6 的 位 置 开 始 ， 向 后 进行 匹配 。 


matches = pattern.exec(user input) ; 


字符 串 'z1 =xl1^2+yl*3+6' 里 ， 


pattern.exec(user_input) 返 回 数组 实例 ["y1"]， 所 以 此 语句 将 内 含 单一 元 素 的 数组 实例 ["y1"]， 赋 
给 变量 matches。 其 中 ， 字 符 串 "y1" 是 在 变量 user_input 的 数据 字符 串 'z1 =x1^2+yl*3+6' 里 ， 


盾 合 正则 表达 式 字面 量 /[a-zA-Z]\d/g 的 模式 的 第 3 个 子 字符 串 。 


console.10g('') 


RAE 
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Pattern = /[a-zA-Z2]\d/y ; 

此 语句 声明 了 初始 数据 为 正则 表达 式 字面 量 /[a-zA-Z]\d/y 的 变量 pattem。 上 述 字 面 量 中 的 字母 
y， 意 味 着 黏 性 匹配 (y, sticky) 的 特征 ， 代 表 在 字符 串 'z1 =xl1^2+yl*3+6' 中 ， 每 次 均 固定 从 属 
性 lastIndex 内 含 的 索引 值 的 位 置 开 始 ， 向 后 进行 仅仅 一 次 的 正则 表达 式 字 面 量 /[a-zA-Z]\d/ 的 匹配 。 

pattern.lastIindex = 0 : 

此 语句 设置 了 变量 pattern 的 属性 lastIndex 的 数值 为 0， 代表 在 变量 user_input 的 数据 字符 串 
里 ， 在 索引 值 为 0 的 位 置 ， 进 行 仅仅 一 次 的 匹配 。 

matches = pattern.exec(user input) ; 

pattern.exec(user_input) 返回 数组 实例 ["z1"]， 所 以 此 语句 将 内 含 单 一 元 素 的 数组 实例 ["z1"]， 
赋 给 变量 matches。 其 中 ， 字 符 串 "z1" 是 在 变量 user_input 的 数据 字符 串 'z1=xl^2+yl*3+6' 里 ， 
于 索引 值 为 0 的 位 置 上 ， 刚 好 符合 正则 表达 式 字 面 量 /[a-zA-Z]\d/y 的 模式 的 子 字符 串 。 


console.log (matches) ; 


Pattern.1lastIndex =1;，; 

此 语句 设置 了 变量 pattern 的 属性 lastIndex 的 数值 为 1， 代 表 在 变量 user_input 的 数据 字符 串 
里 ， 于 索引 值 为 1 的 位 置 上 ， 进 行 仅仅 一 次 的 匹配 。 

matches = pattern.exec(user input) ; 

patter.exec(user_input) 在 此 返回 空 值 null， 所 以 此 语句 将 null 赋 给 变量 matches， 代 表 在 变量 
user_input 的 数据 字符 串 里 ， 进 行 正则 表达 式 字面 量 /[a-zA-Z]\d/y 的 模式 的 匹配 。 并 没有 成 功 。 


7.7 ”万国 码 字 面 量 (ES6 ) 


西方 文字 的 字符 种 类 较 少 ， 中 文字 符 的 种 类 则 相当 繁多 ， 所 以 中 文字 在 万 国 码 (Unicode) 中 
的 编码 长 度 ， 总 是 比 西方 文字 ， 占 用 更 多 的 比特 位 〈bit) 个 数 。 其 中 ， 生 个 字 的 编码 长 度 ， 比 起 
常用 字 ， 占 用 更 多 的 比特 位 。 中 文字 的 Unicode 数码 ， 在 JavaScript 语言 里 ， 可 通过 万 国 码 字面 量 
Au{ 特 定 中 文字 的 数码 } 来 表示 特定 的 中 文字 。 关 于 万 国 码 字面 量 的 调试 ， 可 参考 如 下 示例 。 
【7-7---unicode-literalsjs]】 


var word01 = ' 柯 ' ; 
var word02 = "fi ; 


console.1log (word01.length) ; 

console.1og (word01 .codePointAt (0) .toString(16) .toUpperCase ()) ; 
console.log (word01 === '\u{67EF}') ; 

console.log (word01) ; 

console.10g('') ; 


ti 
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console.1log (word02.1length) ; 

console.1og (word02 .codePointAt (0) .toString(16)) ; 

console.1og (word02 .codePointAt (1) .toString (16) .toUPPerCase()) ; 
console.1log (word02 === '\u{26402}') ; 

console.1log (word02) ; 

console.1log('') ; 


console.log (word02.charAt (0)) ; 
console.1og (word02.charAt (1)) ; 
console.1log (word02.charAt (0) + word02.charAt (1)) ; 


【相关 说 明 】 


Var word01 


' 柯 ' ; 
i 


var word02 

此 语句 声明 了 初始 数据 为 不 同 中 文字 的 变量 word01 与 word02。 

console.log (word01.length) ; 

因为 变量 word01 内 含 的 中 文字 ' 柯 '， 在 【UTF-16】 编 码 单元 中 ， 其 数码 为 十 进 制 数值 26607 
(十 六 进 制 数码 67EF) ， 小 于 十 进 制 数值 2*=65536， 所 以 仅 被 视 为 一 个 字符 。 


console.1og (word01 .codePointAt (0) .toString (16) .toUpperCase()) ; 


十 六 进 制 数码 的 


首先 ，word01.codePointAt(0) 返 回 数值 26607; 再 由 toString(16) 处 理 ， 而 返 
字符 串 '67ef; 最 后 由 toUpperCase() 转 换 ， 而 返回 其 大 写字 母 的 字符 串 '67EF'。 

console.log (word01 === '\u{67EF}') ; 

【word01 = 一 \u{67EF}'】 的 结果 值 为 布尔 值 tue， 代 表 变 量 word01 内 含 的 中 文字 ' 柯 ' 与 万 国 
码 字面 量 \u{67EF}"， 不 仅 其 数据 类 型 均 为 字符 串 〈string) ， 其 所 代表 的 文字 ， 亦 被 视 为 相同 。 其 
中 ，\u 代表 万 国 码 (Unicode) 的 含义 。 


console.1log (word01) ; 


console.1log (word02.length) ; 

变量 word02 内 含 的 中 文字 ' 台 ， 并 不 存在 于 【UTF-16】 编 码 单元 里 ， 仅 存在 于 【Unicode】 编 
码 单元 中 ， 且 其 数码 为 十 进 制 数 值 156674 (十 六 进 制 数码 26402) ， 大 于 十 进 制 数 值 2%* = 65536， 
所 以 被 视 为 两 个 字符 。 

console .log (word02 .codePointAt (0) .toSstring(16)) ; 

word02.codePointAt(0) 在 此 返回 数值 156674, 再 由 toString(16) 处 理 ， 而 返回 其 十 六 进 制 数码 的 
字符 串 '26402'。 


console.1og (word02 .codePointAt (1) .toString (16) .toUPPerCase()) ; 


word02.codePointAt(1) 在 此 则 返回 数值 56322， 再 由 toString(16) 处 理 ， 而 返回 十 六 进 制 数 码 的 
字符 串 'dc02'， 最 后 由 toUpperCase() 转 换 ， 而 返回 其 大 写字 母 的 字符 串 'DC02'。 
console .1og (word02 === '\u{26402}') ; 


【word02 === Nu{26402}'】 的 结果 值 为 布尔 值 tue， 代 表 变 量 word02 内 含 的 中 文字 ' 算 :与 
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"Nu{26402}'， 不 仅 其 数据 类 型 均 为 字符 串 (string，， 其 所 代表 的 文字 ， 亦 被 视 为 相同 。 其 中 ，\u 


代表 万 


console.1log (word02) ; 


码 (Unicode ) 的 含义 。 


console.1log (word02.charAt (0)) ; 


word02.charAt(0) 会 返 


回 字 符 ' 例 '， 代 表 此 字符 无 法 单独 被 完整 呈 


console.1og (word02.charAt (1)) ; 


word02.charAt(1) 也 会 返 


回 字 符 ' 例 '， 代 表 此 字符 无 法 单独 被 完整 时 现 。 


console.1og (word02.charAt (0) + word02.charRt (1)) ; 


【word02.charAt(0) + word02.charAt(1)】 会 返回 可 被 完整 时 现 的 文字 ' 戏 。 


7.8 练习 题 


1. 已 知 变量 str01 的 数据 为 字符 串 ' 今 蛙 明 曦 暖 春风 ， 午 后 炙 意 似 晴 空 ， 夕 刻 彩 晖 遍地 羞 ， 夜 


来 寂 盖 秋思 浓 。'， 试 问 str01.indexOf(，')、str01.lastIndexOf('，') 和 str01.indexOff 晖 7 分别 会 返 [ 


什么 ? 


2. 已 知 变量 str02 的 数据 为 内 含 一 首 绝 句 或 律诗 的 字符 串 ， 例 如 ' 建 筑 千 层 塔 ， 通 达 万 里 跋 ， 
绽 露 盘 满 华 ， 顶 天 立 宏 霸 。'， 并 且 已 知 简易 辨识 单一 中 文字 的 正则 表达 式 【[\u4E00-\u9FA5]】。 
试 编写 JavaScript 源 代 码 ， 以 判断 变量 str02 的 数据 字符 串 为 [1] 绝 句 或 律诗 ， 以 及 [2] 五 言 或 七 言 的 


情况 。 


3. 已 知 变量 str03 的 数据 为 【内 含 以 逗 点 隔 开 的 上 底 长 度 、 下 底 长 度 和 高 度 】 的 字符 串 ， 例 如 
15， 下 底 : 25， 高 度 : 35'】。 除 了 其 中 的 数值 会 变动 之 外 ， 其 余 文 本 都 是 固定 格式 的 。 
试 编写 JavaScript 源 代码 ， 以 计算 并 显示 其 梯形 面积 。 

4. 已 知 变量 str04 的 数据 为 【 带 有 以 逗号 阳 开 的 人 名 词汇 】 的 字符 串 , 例如 【'zelda, peter, paul, 
jasper, alex, daisy, eric, john, stella, tommy, adam, betty, sean, frank, kevin, sammy, julia, yolanda, 
william'】。 试 编写 JavaScript 源 代码 ， 以 重新 输出 并 显示 【 按 字 母 升序 ， 且 开头 字母 为 大 写 】 的 每 
个 人 名 词汇 。 

5. 试 编写 JavaScript 源 代码 ， 以 动态 产生 带 有 1 ~ 1000 编号 的 如 下 字符 串 : 


【' 上 底 : 


no. 
no. 
no. 


no. 
no. 
no. 


0001 
0002 
0003 
| 

0998 
0999 
1000 


第 入 章 
处 理 数 组 


在 许多 编程 语言 中 , 数组 (array ) 一 直 是 相当 重要 的 数据 类 型 。 通 过 数据 为 特定 数组 实例 (array 
instance) 的 变量 ， 可 灵活 访问 特定 数组 实例 中 各 元 素 的 数据 。 因 此 ， 处 理 特定 数组 实例 和 其 各 元 
素 的 任务 ， 是 相当 常见 而 重要 的 。 


8.1 Array 对 象 


在 Array 对 象 里 ， 内 置 许多 处 理 其 各 个 元 素 的 函数 ， 以 及 少许 的 属性 。 


8.1.1 创建 特定 数组 的 副本 (ES6) 


欲 复制 特定 数组 实例 ， 可 通过 Array 对 象 支持 的 函数 oft) 或 valueOf0 来 实现 。 关 于 创建 特定 数组 
的 副本 的 综合 运用 ， 可 参看 如 下 两 个 示例 。 


【8-1-1-e1-Array-ofjs】 


let array01 = Array.of(l, 'two', 3, 'four', 5, "six") ; 


let array02 es et 


let array03 = Array(l, 'two', 3, 'four', 5, 'six') ; 


let array04 = new Array(l, 'two', 3, 'four', 5, 'six') ; 


console.log (array01) ; 
console.1log (array02) ; 
console.1log (array03) ; 
console.1log (array04) ; 
console.10og('') ; 


WAA 
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【相关 说 明 】 


这 4 个 语句 声明 了 初始 数据 均 为 数组 实例 [1，"two"， 3，"four"，5，"six"] 的 4 个 变量 array01 ~ 
array04。 


这 4 个 语句 声明 了 初始 数据 均 为 数组 实例 ["January"] 的 4 个 变量 array05 ~ array08。 


此 两 个 语句 声明 了 初始 数据 均 为 数组 实例 [5] 的 2 个 变量 array09 与 array10。 
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let arrayl1 = Array(5) ; 
let array12 = new Array(5) ; 


这 两 个 语句 声明 了 初始 数据 均 为 内 含 5 个 空 元 素 的 数组 实例 的 变量 array11 与 array12。 
【8-1-1-e2-Array-valueOfjs】 


let a01 
let a02 


["lst’, ‘2nd', "3rd', "4th'] :? 
['lst', '2nd', "3rd', "4th'] ; 


console.log(a0l1 == a02) ; 
let a03 = a0l ; 


console.log(a0l == a03) ; 
console.1log('') 


let a04 = a0l.valueOf () ; 


console.1log(a01 == a0l.valueOf ()) ; 
console.log(a0l == a04) ; 
console.1log('') ; 


console.1log(a01) ; 
console.1log(a04) ; 


【相关 说 明 】 


let a0l = ['lst', '2nd', "3rd'， "4th'] ; 
let a02 = ['lst', '2nd', '3rd', "4th'] ; 


这 两 个 语句 声明 了 初始 数据 均 为 数组 实例 [1st, '2nd', '3rd', '4th"] 的 变量 a01 与 a02。 

console.log(a0l == a02) ; 

变量 a01 与 a02 的 数据 , 虽然 是 其 内 容 皆 相同 的 数组 实例 ;但 是 其 所 占用 的 内 存 地 址 并 不 相同 ， 
所 以 表达 式 【a01 一 a02】 的 结果 值 为 false。 

let a03 = a01 ; 

此 语句 声明 了 初始 数据 为 【变量 a01 的 数组 实例 】 的 变量 a03。 换 言 之 ， 此 语句 使 得 变量 a03 
与 a01 占用 相同 的 内 存 地 址 。 

console.log(a0l == a03) ; 

因为 变量 a01 与 a03 当前 占用 相同 的 内 存 地 址 ， 所 以 表达 式 【a01 == a03】 的 结果 值 为 true。 


console.10g('') ; 


let a04 = a0l.valueOf () ; 


此 语句 声明 了 初始 数据 为 【变量 a01 的 数组 实例 】 的 变量 a04。 在 JavaScript 引擎 中 ， 几 乎 所 
有 内 置 的 对 象 的 实例 ， 都 支持 函数 valueOf0， 可 用 来 取出 特定 对 象 实例 中 的 原始 数据 (primitive 
data) 。 然 而 ， 对 于 Array 对 象 的 实例 来 说 ， 其 实例 和 【其 实例 经 过 函数 valueOf() 处 理 之 后 所 返 
的 新 实例 】， 却 占用 相同 的 内 存 地 址 。 


互 
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console.log(a01 == a01.valueof()) ; 
console.log(a01 = a04) ; 


这 两 个 语句 均 显 示 出 布尔 值 true, 意味 着 当前 变量 a01 的 数组 实例 和 变量 a04 的 数组 实例 ， 以 
及 函数 a01.valueOf0) 所 返回 的 新 实例 ， 均 是 对 应 到 相同 内 存 地 址 的 数组 实例 。 


8.1.2 ”创建 来 自 可 迭代 对 象 的 新 数组 (ES6) 


欲 复制 其 他 可 迭代 对 象 实例 的 当前 数据 , 成 为 新 数组 实例 的 数据 ,可 通过 Array 对 象 支持 的 函 
数 fom() 或 map() 来 实现 。 请 看 下 面 的 两 个 例子 。 
【8-1-2-e1-Array-from.js】 


let word = 'Happiness' ; 
let a01 = Array.from(word) ; 
let a02 = [... word] ; 

let a03 word.split('') ; 


console.1log(a01) ; 
console.1og(a02) ; 
console.1log(a03) ; 
console.1log('') ; 


1// 

ot Tm 2 2 m1 79 0 

let circle area0l = r => (Math.PI * r ** 2).toFixed(2) ; 

let a04 = Array.from([rl, r2, r3], circle area01) ; 

let a05 = Array.from([rl, r2, r3], r => (Math.PI * r ** 2) .toFixed(2)) ; 


console.1log(a04) ; 
console.log(a05) ; 
console.1log('') ; 
function circle area02(r) 


{ 
return (Math.PI * r ** 2).toFixed(2) ; 


let a06 = Array.from([rl, r2, r3], circle area02) ; 


console.1log(a06) ; 
console.1og('') ; 


MAA 
let a07 = Array.from({length: 5}, (value, index) => index ** 3) ; 


console.1log(a07) ; 


【相关 说 明 】 


let word = "Happiness' ; 


声明 初始 数据 为 字符 串 的 变量 word。 
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let a01 = Array.from(word) ; 

此 语句 声明 了 初始 数据 为 内 含 字符 的 数组 实例 ["H","a","p",，"p",， "六 ，"n","e","s","s"] 的 变量 
a01。 通 过 Array 对 象 的 函数 fom(word)， 可 根据 变量 word 中 的 字符 串 'Happiness'"， 创 建 由 其 各 字 
符 所 构成 的 数组 实例 ["H", "a", "p", "p", "i", "n", "e", "s", "s"]。 

let a02 = [... word] ; 


【[… word] 】 等 价 于 【Array.from(word)】。 此 语句 声明 了 初始 数据 为 内 含 字符 的 数组 实例 ["H"， 


man "pn "pn nin mn", nen nsn， "s"] 的 变量 a02。 


let a03 = word.split('') 


【word.split()】 也 等 价 于 【Array.from(word)】。 此 语句 声明 了 初始 数据 为 内 含 字符 数组 实例 
["H", "a", "p", "p", "in "nn "e", "s", "s"] 的 变量 a03。 


console.1log(a01) ; 
console.1og(a02) ; 
console.1log(a03) ; 
console.1log('') ; 


A rr i i 

此 语句 声明 了 初始 数值 为 不 同 整数 值 的 变量 rl、r2 与 3。 

let circle area0l = r => (Math.PI * r ** 2).toFixed(2) ; 

此 语句 声明 了 初始 数据 为 箭头 函数 【r => (Math.PI * r ** 2).toFixed(2)】 的 定义 的 变量 
circle_area01。 此 语句 如 同 定义 了 函数 circle_area01(rD)， 用 来 计算 出 特定 半径 值 的 圆 面积 ， 并 精确 至 
小 数 第 2 位 。 

let a04 = Array.from([rl, r2, r3], circle area01) ; 

此 语句 声明 了 初始 数据 为 数组 实例 ["452.39","706.86", "1017.88"] 的 变量 a04。 其 中 ， 
Array.from([r1，r2，r3]，circle_area01) 会 使 得 变量 rl1、r2 与 3 内 含 的 半径 值 ， 分 别 被 传 入 函数 
circle_area010) 中 ， 计 算 并 返回 内 含 其 各 个 圆 面积 的 数组 实例 ["452.39", "706.86", "1017.88"]。 

let a05 = Array.from([rl, r2, r3], r => (Math.PI * r ** 2) .toFixed(2)) ; 

此 语句 声明 了 初始 数据 为 数组 实例 ["452.39","706.86", "1017.88"] 的 变量 a05。 其 中 ， 
Array.from([r1, 12, r3], r => (Math.PI* r ** 2).toFixed(2)) 会 使 得 变量 r1、r2 与 r3 内 含 的 半径 值 ， 分 
别 被 传 入 箭头 函数 【r => (Math.PI * r ** 2).toFixed(2)】 中 ， 并 返回 内 含 其 各 个 圆 面积 的 数组 实例 
["452.39", "706.86", "1017.88"] 。 


console.log(a04) ; 
console.log(a05) ; 
console.10g('') ; 


function circle area02(r) 
{ 

return (Math.PI * r ** 2) .toFixed(2) ; 
} 


此 语法 定义 了 带 有 参数 r 的 函数 circle_area02()， 亦 可 用 来 计算 出 特定 半径 值 的 


3u 


面积 ， 并 精 
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确 至 小 数 第 2 位 。 

let a06 = Array.from([rl, r2, r3], circle area02) ; 

此 语句 声明 了 初始 数据 为 数组 实例 ["452.39","706.86", "1017.88"] 的 变量 a06。 其 中 ， 
Array.from([r1，r2，r3]，circle_area02) 会 使 得 变量 rl1、r2 与 t3 内 含 的 半径 值 ， 分 别 被 传 入 函数 
circle_area020 中 ， 计 算 并 返回 内 含 其 各 个 圆 面积 的 数组 实例 ["452.39", "706.86", 1017.88"]。 


console.1og(a06) ; 
console.1log('') ; 


let a07 = Array.from({length: 5}, (value, index) => index ** 3) ; 

此 语句 声明 了 初始 数据 为 内 含 5 个 整数 值 的 数组 实例 [0，1，8, 27，64] 的 变量 a07。 其 中 ， 
【Array.from( {length: 5}, (value, index) => index ** 3)】 会 先行 创建 存在 5 个 空 元 素 的 新 数组 实例 ， 
再 通过 箭头 函数 【(value, index) => index ** 3)】， 依 次 计算 出 当前 参数 index 的 数值 的 3 次 方 值 ， 
作为 各 个 空 元 素 的 新 数值 ， 最 后 返回 内 含 其 各 个 数值 的 3 次 方 值 的 数组 实例 [0, 1, 8, 27, 64] 。 

【8-1-2-e2-Array-map.js】 


let radius list = [10, 18, 24, 50, 80] ; 

let circle areas = radius list.map((r) => (Math.PI * r ** 2) .toFixed(2)) ; 
console.log(circle areas) ; 

circle areas = Array.from(radius list, (r) => (Math.PI * r ** 2) .toFixed(2)) ; 


console.log(circle areas) ; 
console.log('') ; 


WAA 
let bases = [1, 4, 9, 16, 25, 36, 49, 64, 81, 100] ; 


let roots = bases.map (Math.sqrt) ; 
console.log(roots) ; 

roots = bases.map((b) => Math.sqrt (b)) ， 
console.log(roots) ; 

roots = bases.map((b) => b ** 0.5) ; 


console.log(roots) ; 

【相关 说 明 】 

let radius list = [10, 18, 24, 50, 80] ; 

此 语句 声明 了 初始 数据 为 内 含 5 个 整数 值 的 数组 实例 的 变量 radius_list。 其 中 ， 各 整数 值 代表 
不 同 的 半径 值 。 


let circle areas = radius list.map((r) => (Math.PI *  ** 2) .toFixed(2)) ; 
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此 语句 声明 了 变量 circle_areas， 其 初始 数据 为 内 含 不 同 半径 值 的 圆 面积 的 数组 实例 ["314.16"， 
"1017.88"，"1809.56"，"7853.98"，"20106.19"]。 在 此 ， 被 传 入 函数 map0 的 数据 为 匿名 函数 【(r) => 
(Math.PI *r ** 2).toFixed(2)】 的 定义 ， 用 来 返回 精确 至 小 数 第 2 位 的 特定 圆 面积 的 结果 值 。 

因为 变量 radius_list 的 数据 为 数组 实例 ， 所 以 支持 函数 【map( 匿 名 函数 的 定义 或 者 特定 函数 名 
称 )】， 可 将 变量 radius_list 数组 实例 中 的 各 整数 值 ， 间 接 通过 函数 map0， 传 递 给 箭头 函数 【(D => 
(Math.PI* r ** 2).toFixed(2)】。 


console.log(circle areas) ; 


circle areas = Array.from(radius list, (r) => (Math.PI * r ** 2) .toFixed(2)) ; 
此 语句 将 内 含 不 同 半径 值 的 圆 面积 的 数组 实例 ["314.16","1017.88"，"1809.56",，"7853.98", 
"20106.19"]， 赋 给 变量 circle_areas。 


console.log(circle areas) ; 
console.10g('') 


let bases = [1, 4, 9, 16, 25, 36, 49, 64, 81, 100] ; 

此 语句 声明 了 变量 bases， 其 初始 数据 为 内 含 1 ~ 10 的 平方 值 的 数组 实例 。 

let roots = bases.map (Math.sqrt) ; 

在 此 ， 被 传 入 函数 map() 的 数据 为 Math 对 象 的 内 置 函 数 sqrt 的 名 称 ， 用 来 返回 特定 整数 值 的 
平方 根 值 。 此 语句 声明 了 变量 roots, 其 初始 数据 为 内 含 不 同 平方 根 值 的 数组 实例 [1, 2, 3, 4, 5, 6, 7, 8， 
9, 10]。 其 中 ， 可 通过 函数 map(0， 间 接 将 变量 bases 的 数组 实例 [1, 4, 9, 16, 25, 36, 49, 64, 81, 100] 
中 的 各 整数 值 ， 传 递 给 内 置 函 数 Math.sqrt()。 


console.log(roots) ; 


roots = bases.map((b) => Math.sqrt (b)) ; 

此 语句 将 内 含 不 同 平方 根 值 的 数组 实例 [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]， 赋 给 变量 roots。 
在 此 ，【bases.map((b) => Math.sqrt(b))】 和 【bases.map(Math.sqrt)】 具 有 相同 的 效果 。 
console.log(roots) ; 


roots = bases.map((b) => b ** 0.5) ; 


此 语句 也 将 内 含 不 同 平方 根 值 的 数组 实例 [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]， 赋 给 变量 roots。 在 此 ， 
【bases.map((b) => b ** 0.5)】 和 【bases.map(Math.sqrt)】 也 县 有 相同 的 效果 。 


8.1.3 ”数组 元 素数 据 所 构成 的 字符 串 


欲 将 特定 数组 实例 中 各 元 素 的 数据 ， 连 接 成 为 新 的 字符 串 ， 可 通过 Array 对 象 支持 的 函数 
toString0 或 join0 来 实现 。 下 面 通过 示例 来 加 以 调试 。 
【8-1-3-Array-toString-and-join.js】 


let fruits = ['apricot', 'blueberry', 'cranberry', "durian' ] ; 
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let str01 = fruits.toString() ; 
let str02 = fruits.join(',') ; 
let str03 = fruits.join() ; 


console.log(str01) ; 
console.log(str02) ; 
console.log(str03) ; 
console.1log('') ; 


/1 
let str04 = fruits.join(' '); 


console.log(str04) ; 


【相关 说 明 】 


let fruits = ['apricot', ‘blueberry', 'cranberry', ‘'durian’' ] ; 


此 语句 声明 了 初始 数据 为 内 含 多 个 字符 串 的 数组 实例 的 变量 fruits。 


let str01 = fruits.toString() ; 
let str02 = fruits.join(',') ; 
let str03 = fruits.join() ; 


这 3 个 语句 声明 了 初始 数据 为 相同 字符 串 'apricot,blueberry,cranberry,durian' 的 变量 str01、str02 
与 str03。 换 言 之 ，fruits.toString()、fruits.join(",') 与 fruits.join() 在 本 示例 中 ， 具 有 相同 的 效果 ， 均 会 
返回 【以 逗号 作为 分 隔 符 ， 并 连接 (join〉 变 量 fruits 的 数组 实例 中 各 字符 串 】 的 新 字符 串 
'apricot,blueberry,cranberry,durian'。 


console.log(str01) ; 
console.log(str02) ; 
console.log(str03) ; 
console.1log('') ; 


let str04 = fruits.join(' '); 

此 语句 声明 了 初始 数据 为 字符 串 'apricot blueberry cranberry ”durian' 的 变量 str04。 
fruits.join(”') 会 返回 【以 2 个 空格 字符 ' ', 作为 分 隔 符 , 并 连接 变量 fruits 的 数组 实例 中 各 字符 串 】 
的 新 字符 串 'apricot blueberry cranberry durian'。 


8.1.4 数组 元 素 的 放 入 和 取出 

和 欲 放 入 新 元 素 的 数据 ,至 特定 数组 实例 中 , 可 通过 Array 对 象 实例 支持 的 函数 push() 或 unshift()。 
欲 取出 特定 数组 实例 中 的 元 素 ,可 通过 Array 对 象 实例 支持 的 函数 pop() 或 shift0 来 实现 。 下 面 通 过 
示例 进行 说 明 。 

【8-1-4-accessing-of-array-elements.js】 


let balls = ['baseball', 'basketball'] ; 


balls.push('marble') ; 
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let new length = balls.push('dodgeball', 'fireball', 'Earth' ) ; 
console.log (balls.length == new length) ; 


console.log(balls) ; 
console.1log('') ; 


/LA/ 
let drawed data = balls.pop() ; 


console.1log (drawed data) ; 
console.log(balls) ; 
console.1og('') ; 


pd 
drawed data = balls.shift() ; 


console.log (drawed data) ; 
console.log(balls) ; 
console.10g('') ; 


/LA/ 
balls.unshift("Pluto") ; 
balls.unshift("Moon'， "Mars') ; 


console.log(balls) ; 


【相关 说 明 】 
let balls = ['baseball', 'basketball'] ; 
此 语句 声明 了 初始 数据 为 内 含 2 个 字符 串 的 数组 实例 的 变量 balls。 
balls.push('marble') ; 
因为 变量 balls 当前 的 数据 为 数组 实例 ， 所 以 支持 函数 push0。 语 法 balls.push(marble) 使 得 变 
量 balls 的 数组 实例 在 其 尾 端 ， 被 新 增 了 1 个 数据 为 字符 串 'marble 的 元 素 。 
let new_length = balls.push('dodgeball', 'fireball', "Earth' ) ; 
此 语句 声明 了 初 值 始 为 整数 值 6 的 变量 new_length。 其 中 ,balls.push('dodgeball', 'fireball', 'Earth') 
全 得 变量 balls 的 数组 实例 ， 被 新 增 其 数据 分 别 为 字符 串 'dodgeball'、'fireball' 与 'Earth' 的 3 个 元 素 ， 
而 成 为 带 有 6 个 元 素 的 数组 实例 ["baseball", "basketball", "marble", "dodgeball", "fireball", "Earth"]， 
最 后 返回 其 元 素 个 数 6。 
console.log (balls.length == new length) ; 
balls.length 也 会 返回 当前 变量 balls 的 数组 实例 中 的 元 素 个 数 6, 所 以 其 数值 和 变量 new_length 
的 数值 是 相等 的 。 


console.log(balls) ; 
console.1log('') ; 


let drawed data = balls.pop() ; 
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此 语句 声明 了 变量 drawed_data， 其 初始 数据 为 【在 变量 balls 的 数组 实例 中 ， 其 尾 端 当前 的 元 
素 】 的 数据 字符 串 EEarth'。 其 中 ， 语 法 balls.pop0 会 取出 并 返回 在 变量 balls 的 数组 实例 中 ， 其 尾 端 
当前 的 元 素 的 数据 字符 串 'Earth ， 使 得 变量 balls 的 数组 实例 ， 变 更 为 ["baseball"，"basketball"， 
"marble", "dodgeball", "fireball"] 。 


console.log (drawed data) ; 
console.log(balls) ; 
console.1log('') ; 


drawed data = balls.shift() ; 

此 语句 将 【在 变量 balls 的 数组 实例 中 ， 取 出 其 前 端 当前 的 元 素 】 的 数据 字符 串 'baseball， 并 
赋 给 变量 drawed_data。 被 取出 其 前 端 当前 的 元 素 之 后 ， 变 量 balls 的 数组 实例 变更 为 ["basketball"， 
"marble", "dodgeball", "fireball"] 。 


console.log (drawed data) ; 
console.log(balls) ; 
console.10g('') ; 


balls.unshift('Pluto') ; 


此 语句 在 其 前 端 ,新 增 其 数据 为 字符 串 'Pluto' 的 元 素 之 后 ,变量 balls 的 数组 实例 变更 为 ["Pluto"， 
"basketball", "marble", "dodgeball", "fireball"] 。 


balls.unshift('Moon', 'Mars') ; 


此 语句 在 其 前 端 ， 新 增 其 数据 分 别 为 字符 串 "Moon' 与 "Mars' 的 两 个 元 素 之 后 ， 变 量 balls 的 数组 
实例 变更 为 ["Moon", "Mars", "Pluto", "basketball", "marble", "dodgeball", "fireball"] 。 


8.1.5 ”新 增 或 删除 数组 的 多 个 元 素 

欲 在 特定 数组 实例 中 , 新 增 或 删除 连续 的 多 个 元 素 , 可 通过 Array 对 象 实例 支持 的 函数 splice() 
来 实现 。 请 看 下 面 的 示例 。 

【8-1-5-Array-splice.js】 


let vegetables = ['Lettuce', 'broccoli', 'spinach', 'kale', 'cabbage', 'onion', 'green beans'] ; 


console.log (vegetables) ; 
console.10og('') ; 


let drawed list = vegetables.splice(1l, 2) ; 
console.log (drawed list) ; 

console.log (vegetables) ; 

console.1o0g('') ; 


vegetables.splice(l, 0, ... drawed list) ; 


console.log (vegetables) ; 
Console.1log('') ; 
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vegetables.splice(3, 0, 'garlic') ; 


console.log (vegetables) ; 


【相关 说 明 】 


let vegetables = ['Lettuce', 'broccoli', 'spinach', 'kale', 'cabbage', 'onion', 'green beans']; 
声明 初始 数据 为 内 含 多 个 字符 串 的 数组 实例 的 变量 vegetables。 
console.log (vegetables) ; 


console.1og('') ; 


let drawed list = vegetables.splice(1l, 2) ; 


此 语句 声明 了 初始 数据 为 数组 实例 ["broccoli", "spinach"] 的 变量 drawed list。 其 中 ， 变 量 
vegetables 当前 的 数据 为 数组 实例 ， 所 以 支持 函数 splice0， 可 在 数组 实例 中 ， 新 增 或 删除 连续 的 多 
个 元 素 。vegetables.splice(1, 2) 会 取出 【在 变量 vegetables 的 数组 实例 中 ， 从 其 索引 值 为 1 开始 的 2 
个 元 素 ， 并 放 入 被 返回 的 新 数组 实例 ["broccoli"，"spinach"] 中 。 因 此 ， 执 行 完 此 语 名 之后， 变量 
vegetables 的 初始 数据 ， 成 为 了 数组 实例 ["Lettuce", "kale", "cabbage", "onion", "green beans"]。 


console.log (drawed list) ; 
console.log (vegetables) ; 
console.1og('') ; 


vegetables.splice(l1l, 0, ... drawed list) ; 


因为 扩展 运算 符 【...] 的 缘故 , 【vegetables.splice(1, 0, .… drawed_list)】 等 价 于 【vegetables.splice(1， 
0, "broccoli", "spinach")】。 其 中 ，vegetables.splice(1, 0,… drawed_list) 会 在 变量 vegetables 的 数组 实 
例 中 ， 从 索引 值 1 (第 2 个 ) 的 元 素 'kale' 开 始 ， 在 不 删除 任何 元 素 (0) 的 情况 下 ， 插 入 来 自 【.… 
drawed_list】 扩 展 出 来 的 数据 字符 串 "broccoli" 与 "spinach"。 执 行 完 此 语句 之 后 ， 变 量 vegetables 的 
数组 实例 ， 从 ["Lettuce"，"kale"，"cabbage"，"onion"，"green beans"]， 变 更 为 ["Lettuce"，"broccoli"， 


"spinach", "kale", "cabbage", "onion", "green beans"] 。 


console.log (vegetables) ; 
console.10g('') ; 


vegetables.splice(3, 0, 'garlic') ; 


vegetables.splice(3, 0, garlic) 会 在 变量 vegetables 的 数组 实例 中 ， 从 索引 值 3 的 元 素 'kale' 开 始 ， 
在 不 删除 任何 元 素 〈0) 的 情况 下 ， 揪 入 其 数据 为 字符 串 "garlic" 的 新 元 素 。 执 行 完 此 语句 之 后 ， 变 
量 vegetables 的 数组 实例 , 从 ["Lettuce", "broccoli", "spinach", "kale", "cabbage", "onion", "green beans"] 


变更 为 ["Lettuce", "broccoli", "spinach", "garlic", "kale", "cabbage", "onion", "green beans"]。 


8.1.6 合并 多 个 数组 


欲 将 多 个 数组 实例 ， 合 并 成 为 新 的 数组 实例 ， 可 通过 Array 对 象 实例 支持 的 函数 concat() 来 实 
现 。 请 看 下 面 的 示例 。 
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【8-1-6-Array-concatjs】 


let a01 
let a02 


多 下 浪 
[2，4，6] ; 


1et a03 = [x "yy ES JI 


let combination = a0l.concat (a02, a03) ; 


console.1log (combination) ; 
console.1o0g('') ; 


/LA/ 
combination = [... a0l, ... a02, ... a03] ; 


console.log (combination) ; 
console.1log('') ; 


【相关 说 明 】 
let aol = [1, 3, 5] ; 
let a02 = [2, 4, 6] ; 


这 两 个 语句 声明 了 初始 数据 为 【分 别 内 含 3 个 整数 值 的 数组 实例 】 的 变量 a01 与 a02。 
let a03 = [x', yy', '2'] }; 

声明 初始 数据 为 内 含 3 个 字符 的 数组 实例 的 变量 a03。 

let combination = a0l.concat (a02, a03) ; 


声明 变量 combination， 其 初始 数据 为 合并 3 个 变量 a01、a02 与 a03 的 各 个 数组 实例 之 后 的 新 
数组 实例 [1, 3, 5, 2, 4, 6, 'x', 'y', 'Z] 。 


console.log (combination) ; 
console.1l0g('') ; 


combination = [... a0l, ... a02, ... a03] ; 


在 此 语句 中 ， 其 等 号 右 侧 的 [... a01, .… a02, .… a03] 等 价 于 a01.concat(a02, a03)。 其 中 ， 通 过 扩展 
运算 符 【...】， 使 得 变量 combination 的 数据 ， 再 次 成 为 数组 实例 [1, 3, 5, 2, 4, 6, x', 'y', 'Z]。 


8.1.7 ”切割 数组 

欲 在 特定 数组 实例 中 ， 复 制 数 个 连续 的 元 素 , 放置 于 新 的 数组 实例 ， 可 通过 Array 对 象 实例 支 
持 的 函数 slice() 来 达成 。 请 看 下 面 的 示例 。 

【8-1-7-Array-slice.js】 


let vegetables = ['Lettuce', 'broccoli', 'spinach', 'kale', 'cabbage', 'onion', 'green beans'] ; 
let sliced list = vegetables.slice(2) ; 


console.log(sliced list) ; 
console.10og('') ; 
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sliced list = vegetables.slice(3，6) ; 


console.log(sliced list) ; 
console.10g('') ; 


sliced list = vegetables.slice(-2) ; 


console.log(sliced list) ; 
console.1log('') ; 


【相关 说 明 】 
let vegetables = ['Lettuce', 'broccoli', 'spinach', 'kale', 'cabbage', 'onion', 'green beans']; 
声明 初始 数据 为 内 含 多 个 字符 串 的 数组 实例 的 变量 vegetables。 
let sliced list = vegetables.slice(2) ; 
此 语句 声明 了 初始 数据 为 数组 实例 ["spinach", "kale", "cabbage", "onion", "green beans"] 的 变量 
sliced list。 其 中 ，vegetables.slice(2) 会 【在 变量 vegetables 的 数组 实例 中 ， 分 割 (slice》 而 复制 出 
从 索引 值 为 2 (第 3 个 ) 的 元 素 "spinach" 开 始 ， 到 最 后 一 个 元 素 "green beans" 为 止 】 的 新 数组 实例 


["spinach", "kale", "cabbage", "onion", "green beans"]。 


console.log(sliced list) ; 
console.10og('') ; 


sliced list = vegetables.slice(3, 6) ; 

此 语句 将 数组 实例 ["kale", "cabbage", "onion"]， 赋 给 变量 sliced_list。 其中, vegetables.slice(3, 6) 
会 【在 变量 vegetables 的 数组 实例 中 ， 分 制 而 复制 出 从 索引 值 为 3( 第 4 个 ) 的 元 素 "kale" 开 始 ， 到 
索引 值 为 5 (第 6 个 ) 的 元 素 "onion" 为 止 】 的 新 数组 实例 ["kale", "cabbage", "onion"]。 


console.log(sliced list) ; 
console.1log('') ; 


sliced list = vegetables.slice(-2) ; 


此 语句 将 数组 实例 ["onion", "green beans"]， 赋 给 变量 sliced_list。 其 中 ，vegetables.slice(-2) 会 
【在 变量 vegetables 的 数组 实例 中 ,分割 而 复制 出 从 索引 值 为 -2 (倒数 第 2 个 ) 的 元 素 "onion" 开 始 ， 
到 最 后 一 个 元 素 "green beans" 为 止 】 的 新 数组 实例 ["onion", "green beans"]。 


8.1.8 寻找 符合 特定 条 件 的 数组 元 素 (ES6) 
欲 在 特定 数组 实例 中 , 找 出 符合 特定 条 件 的 第 1 个 元 素 的 数据 (data ) 或 索引 值 (index value ) ， 
可 通过 Array 对 象 实例 支持 的 函数 fnd() 或 findIndex0 来 实现 。 请 看 下 面 的 示例 。 
【8-1-8-Array-find-and-findindex.js 】 


let numbers = [10, 30, 20, 55, 15, 70, 23] ; 


numbers.sort() ; 
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console .log (numbers) ; 


// greater than 30 
let gt3 =n=>n>30; 


console.1log (numbers.find (gt3)) ; 
console.1log (numbers .findIndex(gt3)) ; 


【相关 说 明 】 

let numbers = [10, 30, 20, 55, 15, 70, 23] ; 

声明 初始 数据 为 内 含 多 个 整数 值 的 数组 实例 的 变量 numbers。 

numbers.sort() ; 

此 语句 将 变量 numbers 的 数组 实例 的 各 元 素 值 , 由 小 至 大 排序 ,使 得 其 数组 实例 成 为 [10, 15, 20， 
23, 30, 55, 70]。 

console.log (numbers) ; 

// greater than 30 

let gt3 =n=>n>30， 

此 语句 声明 了 初始 数据 为 第 头 函数 【n => n > 30】 的 定义 的 变量 gf3。 换 言 之， 变量 gt3 就 如 
同 函 数 名 称 。 表 达 式 【n > 30】 的 结果 值 为 布尔 值 true 或 者 false， 会 成 为 函数 gt3(n) 的 返回 值 。 


console.log (numbers .find(gt3)) ; 


numbers.find(gt3) 会 使 得 变量 numbers 的 数组 实例 中 各 元 素 的 整数 值 , 间接 被 传递 给 名 称 为 gt3 
的 函数 ， 成 为 其 参数 n 的 数值 ， 并 被 判断 是 否 为 大 于 30 的 第 1 个 整数 值 。 若 特定 元 素 的 整数 值 是 
大 于 30 的 第 1 个 整数 值 ， 则 会 成 为 numbers.find(gt3) 的 返回 值 ; 在 此 ， 其 返回 值 为 55。 


console.log (numbers .findIndex(gt3)) ; 


numbers.findIndex(gt3) 会 使 得 变量 numbers 的 数组 实例 中 各 元 素 的 整数 值 ， 间 接 被 传递 给 名 称 
为 gt3 的 函数 ， 成 为 其 参数 n 的 数值 ， 并 被 判断 是 否 为 大 于 30 的 第 1 个 整数 值 。 若 特定 元 素 的 整 
数值 是 大 于 30 的 第 1 个 整数 值 , 则 其 元 素 所 对 应 的 索引 值 会 成 为 numbers.findIndex(gt3) 的 返回 值 ; 
在 此 ， 其 返回 值 为 5。 


8.1.9 ”自我 复制 并 覆盖 数组 的 部 分 元 素 (ES6) 


欲 在 特定 数组 实例 中 ， 先 行 自我 复制 连续 的 数 个 元 素 ， 并 用 来 覆盖 到 特定 索引 位 置 开 始 的 数 
个 元 素 ， 则 可 通过 Array 对 象 实例 支持 的 函数 copyWithin0 来 实现 。 请 看 下 面 的 示例 。 
【8-1-9-Array-copyWithinjs】 


let a00 = [a’s "Ds "c's "G's "@", "£°] 
A i 1 | 
td | 
2 eh | 
oc a wl a i os Er 
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【相关 说 明 】 


这 5 个 语句 分 别 声明 了 5 个 变量 a00 ~ a04， 其 初始 数据 均 为 数组 实例 [a', 'b', 'e', 'd', 'e', 了 f]。 


因为 变量 a01 当前 的 数据 为 数组 实例 ， 所 以 支持 函数 copyWithin()， 以 进行 自我 复制 并 覆盖 本 
身 数组 实例 的 部 分 元 素 。a01.copyWithin(2) 可 使 得 变量 a01 的 数组 实例 [a', 'b','e', 'd', 'e', 'f]， 从 索引 
值 为 2 (第 3 个 ) 的 元 素 'c' 开 始 ， 被 覆盖 【从 默认 索引 值 0 (第 1 个 ) 的 元 素 'a 开 始 】 的 连续 元 素 ， 
进而 使 得 变量 a01 的 数组 实例 ， 变 更 为 ["a", "b", "a", "b", "c", "d"]。 


a02.copyWithin(-2) 可 使 得 变量 a02 的 数组 实例 [a', 'b', 'c', 'd', 'e', f], 从 索引 值 为 -2( 倒 数 第 2 个 ) 
的 元 素 'e' 开 始 ， 被 连续 覆盖 【从 默认 索引 值 0 (第 1 个 ) 的 元 素 'a 开 始 】 的 连续 元 素 ， 进 而 使 得 变 
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量 a02 的 数组 实例 ， 变 更 为 [ar, "b", "er "d", "a", "b"]。 


console.log(a00) ; 
console.log(a02) ; 
console.10g('') ; 


// (target, start) 

a03.copyWithin(0, 2) ; 

a03.copyWithin(0, 2) 可 使 得 变量 a03 的 数组 实例 ['a', 'b', 'c', 'd', 'e', f]， 从 索引 值 为 0 (第 1 个 ) 
的 元 素 'a 开 始 ， 被 连续 覆盖 【从 索引 值 2 (第 3 个 ) 的 元 素 'c 开 始 】 的 连续 元 素 ， 进 而 使 得 变量 a03 
的 数组 实例 ， 变 更 为 ["e", "d", "e", "fen"f]。 

console.1log(a00) ; 


console.1log(a03) ; 
console.1og('') ; 


// (target, start, end) 

a04.copyWithin(-3, 1, 3) ; 

a04.copyWithin(-3, 1, 3) 可 使 得 变量 a04 的 数组 实例 ['a', 'b', 'c', 'd', 'e', f]， 从 索引 值 为 -3( 倒 数 第 
3 个 ) 的 元 素 'd' 开 始 ， 被 连续 覆盖 【从 索引 值 1 (第 2 个 ) 的 元 素 bb' 开 始 ， 到 索引 值 为 3 - 1=2 (第 
3 个 ) 的 元 素 'c 为 止 的 两 个 元 素 , 进而 使 得 变量 a04 的 数组 实例 , 变更 为 ["a", "b", "c", "b", "c", "f"]。 


8.1.10 判断 数组 各 元 素 是 否 符合 特定 条 件 


欲 判断 在 特定 数组 实例 中 , 其 各 元 素 的 数据 是 否 符合 特定 条 件 , 可 通过 Array 对 象 实例 支持 的 
函数 every0 和 some() 来 实现 。 
【8-1-10-Array-every-and-some.js】 


function comparing (value, index, array) 
{ 
return value > 0 && value < 20; 


} 


16t a0 wj24. 307 10r 5 2] 
let a02 = [1, 15, 8, 3, 19] ; 


console.log(a0l.every (comparing)) ; 
console.log(a02.every (comparing)) ; 
console.1log('') ; 


console.log(a0l.some(comparing)) ; 
console.1log(a02.some(comparing)) ; 


【相关 说 明 】 


function comparing (value, index, array) 
{ 

return value > 0 && value < 20; 
} 
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此 语句 定义 了 带 有 3 个 参数 value、index 与 array 的 函数 comparing()。 其 中 ， 参 数 value 的 数 
值 , 是 特定 数组 实例 中 特定 元 素 的 数值 , 而 【return value > 0 && value < 20】 最 终 会 返回 布尔 值 true 
或 者 false。 


let a01 
let a02 


这 两 个 语句 声明 了 初始 数据 为 不 同 数组 实例 的 变量 a01 和 a02。 

console.1log(a01.every (comparing)) ; 

a01.every(comparing) 将 变量 a01 的 数组 实例 [24, 36, 10, 5, -2] 中 的 每 个 整数 值 , 分 别传 入 名 称 为 
comparing 的 函数 ， 并 判断 其 是 否 满足 特定 关系 表达 式 所 对 应 的 条 件 。 在 此 ，a01.every(comparing) 
返回 布尔 值 false， 意 味 着 并 不 是 所 有 的 整数 值 ， 均 满足 【value > 0 && value < 20】 的 条 件 。 

console.1log(a02.every (comparing)) ; 

a02.every(comparing) 将 变量 a02 的 数组 实例 [1, 15, 8, 3, 19] 中 的 每 个 整数 值 ， 分 别传 入 名 称 为 
comparing 的 函数 ， 并 判断 其 是 否 满足 特定 关系 表达 式 所 对 应 的 条 件 。 在 此 ，a02.every(comparing) 
返回 布尔 值 tue， 意 味 着 所 有 的 整数 值 ， 均 满足 【value > 0 && value < 20】 的 条 件 。 


console.1log('') ; 


L247 360 10, 57.22] 3 
[1, 15, 8, 3, 19] ; 


console.log(a0l.some(comparing)) ; 

a01.some(comparing) 将 变量 a01 的 数组 实例 [24, 36, 10, 5, -2] 中 的 每 个 整数 值 , 分 别传 入 名 称 为 
comparing 的 函数 ， 并 判断 其 中 一 些 整数 值 ， 是 否 满足 特定 关系 表达 式 所 对 应 的 条 件 。 在 此 ， 
a01.some(comparing) 返 回 布尔 值 true, 意味 着 部 分 整数 值 满足 了 【value > 0 && value < 20】 的 条 件 。 


console.1log(a02.some(comparing)) ; 


a02.some(comparing) 将 变量 a02 的 数组 实例 [1, 15, 8, 3, 19] 中 的 每 个 整数 值 ， 分 别传 入 名 称 为 
comparing 的 函数 ， 并 判断 其 中 一 些 整数 值 ， 是 否 满足 特定 关系 表达 式 所 对 应 的 条 件 。 在 此 ， 
a02.some(comparing) 返 回 布尔 值 true, 意味 着 部 分 整数 值 满足 了 【value > 0 && value < 20】 的 条 件 。 


8.1.11 数组 部 分 元 素 的 填充 (ES6) 

欲 在 特定 数组 实例 中 ， 填 充 新 元 素 ， 以 覆盖 部 分 的 连续 元 素 , 可 通过 Array 对 象 实例 支持 的 函 
数 fill0 来 实现 。 请 看 下 面 的 示例 。 

【8-1-11-Array-filljs } 


it Velplate wm ("ar "Dr Ors dyer 汪 
let a01 = template.slice(0) ; 


a0lsfi11("?*) 


console.1log(a01) ; 
console.10g('') 


a0l = template.slice(0) ; 


234 | JavaScript 编程 思想 : 从 ES5 到 ES9 


【相关 说 明 】 


声明 初始 数据 为 内 含 多 个 字符 的 数组 实例 的 变量 template。 


此 语句 声明 了 变量 a01, 并且 通过 Array 对 象 实例 支持 的 函数 slice(0), 间接 复制 了 变量 template 
的 数组 实例 [av 'b', 'c', 'd', 'e', 'f]， 成 为 变量 a01 的 初始 数据 。 


此 语句 将 变量 a01 的 数组 实例 中 各 元 素 的 数据 ， 改 写成 为 字符 '"， 进 而 使 得 变量 a01 的 数组 实 
例 ， 变 更 为 ["2", "2" "2" "29", "9", "9"]。 


此 语句 间接 将 数组 实例 ['a', 'b,'c, 'd', 'e', f]， 赋 给 变量 a01。 


此 语句 使 得 在 变量 a01 的 数组 实例 中 ， 从 索引 值 为 2 第 3 个 ) 的 元 素 开始 ， 到 最 后 一 个 元 素 
为 止 ， 其 各 个 数据 均 被 改写 成 为 字符 '$'， 使 得 变量 a01 的 数组 实例 ， 变 更 为 ["a"，"b"，"$"，"$"，"$"， 
"8"], 


此 语句 再 次 间接 将 数组 实例 ['a', 'b', 'c', 'd', 'e', "人 ]， 赋 给 变量 a01。 
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在 变量 a01 的 数组 实例 中 ， 从 索引 值 为 2 (第 3 个 ) 的 元 素 开 始 ， 到 索引 值 为 5 -1=4 (第 5 
个 ) 的 元 素 为 止 , 其 各 个 数据 均 被 改写 成 为 字符 *， 使 得 变量 a01 的 数组 实例 ,变更 为 ["a", "b","*", 
Wd 


console.log(a01) ; 


a01 = template.slice(0) ; 

此 语句 再 次 将 数组 实例 ['a', b', 'c', 'd', 'e', f]， 赋 给 变量 a01。 

BOTSTiLL( 2 

在 变量 a01 的 数组 实例 中 ， 从 索引 值 为 1 (第 2 个 ) 的 元 素 开始 ， 到 索引 值 为 -2 - 1= -3 倒数 
第 3 个 ) 的 元 素 为 止 , 其 各 个 数据 均 被 改写 成 为 字符 和, 使 得 变量 a01 的 数组 实例 , 变更 为 ["a","^", 
SON ON Ey 

console.log(a01) ; 

a01 = Array(7) .fill('@ @') ; 

此 语句 使 得 变量 a01 的 数组 实例 ， 变 更 为 "@_@", "@_@","@_@","@_@","@_@","@_@"， 
"@_@"]。 其 中 ，Array(7) 等 价 于 【new Array(7)】， 可 动态 产生 内 含 7 个 空 元 素 的 数组 实例 ， 进 一 
步 通过 数组 实例 支持 的 函数 fll(@_@)， 使 得 空 元 素 的 数据 ， 被 改写 成 为 字符 串 '@_@'。 


8.1.12 ”筛选 出 符合 特定 条 件 的 数组 元 素 (ES6) 


和 欲 在 特定 数组 实例 中 ,筛选 出 符合 特定 条 件 的 所 有 元 素 ， 以 组 成 新 的 数组 实例 ， 可 使 用 Array 
对 象 实例 支持 的 函数 filter()。 请 看 如 下 示例 。 

【8-1-12-Array-filter.js } 

let names = ['Eric', 'Sam', 'Jimmy', 'Paula', 'Daisy', ‘'Jennifer', 'Sean'] ; 

function check (name) 

{ 


return name.length < 5; 


} 
let shorts = names.filter (check) ; 


console.log(shorts) ; 
console.10g('') 


MAA 
let numbers = [123, 456, 789, 55, 22, 33] ; 
let smalls = numbers.filter (num => num sg 3 == 0) ; 


console.1log (smalls) ; 
【相关 说 明 】 


let names = ['Eric', 'Sam', 'Jimmy', 'Paula', 'Daisy', ‘'Jennifer', 'Sean'] ; 
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声明 初始 数据 为 内 含 多 个 字符 串 的 数组 实例 的 变量 names。 
function check (name) 
{ 


return name.length < 5 ; 


若 参数 name 的 数据 字符 串 小 于 5 个 字符 ， 则 此 语句 会 返回 布尔 值 tue; 反之 ， 则 返回 布尔 值 


false。 


} 

上 述 语法 定义 了 带 有 参数 name 的 函数 check()。 

let shorts = names.filter (check) ; 

此 语句 声明 了 初始 数据 为 内 含 多 个 字符 串 的 数组 实例 ["Eric", "Sam", "Sean"] 的 变量 shorts。 其 
中 ,names.filter(check) 会 返回 【在 变量 names 的 数组 实例 [Eric,'Sam', Jimmy', 'Paula', 'Daisy', 'Jennifer', 
'Sean'] 中 ， 其 字符 个 数 小 于 5 的 字符 串 】 所 构成 的 子 数组 实例 ["Eric"，"Sam"，"Sean"]。 判 断 特定 元 
素 的 数据 字符 串 的 字符 个 数 ， 是 否 小 于 5 的 比较 表达 式 ， 存 在 于 名 称 为 check 的 函数 内 部 的 语句 


【return name.length <5 ;】 里 。 


console.log(shorts) ; 
console.1og('') ; 


let numbers = [123, 456, 789, 55, 22, 33] ; 

声明 初始 数据 为 内 含 多 个 整数 值 的 数组 实例 的 变量 numbers。 

let smalls = numbers.filter(num => num % 3 == 0) ; 

此 语句 声明 了 初始 数据 为 内 含 多 个 整数 值 的 数组 实例 [123, 456, 789, 33] 的 变量 smalls。 其 中 ， 
numbers.filter(num => num % 3 一 0) 会 返回 子 数组 实例 [123, 456, 789, 33]， 其 各 个 元 素 的 数值 ， 来 
自 于 【在 变量 numbers 的 数组 实例 [123, 456, 789, 55, 22, 33] 中 ， 其 除 以 3 的 余数 为 0】 的 整数 值 。 
判断 【 除 以 3 的 余数 为 0】 的 比较 表达 式 ， 是 在 箭头 函数 内 部 的 【num % 3 一 0】。 在 此 ， 于 箭头 
函数 的 箭头 符号 【=>】 的 右 侧 ， 其 比较 表达 式 【num % 3 一 0】 等 价 于 【f{return num %3==0;}】。 


8.1.13 ”循环 访问 数组 各 元 素 


欲 循环 访问 特定 数组 实例 中 的 各 元 素 , 除了 通过 循环 语句 的 协助 之 外 , 亦 可 通过 Array 对 象 实 
例 支持 的 函数 forEach() 来 达成 。 请 看 如 下 示例 。 


【8-1-13-Array-forEach.js】 


let shapes = ['circle', 'triangle', 'rectangle', "trapezoid'， 'pentagons', 'hexagon', 
'heptagon', 'octagon', 'star'] ; 


function display (value) 
{ 

console.log(value) ; 
} 
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shapes.forEach (display) ; 


Console.1log('') ; 


shapes.forEach (Value => console.log(value)) ; 


【相关 说 明 】 
let shapes = ['circle', 'triangle', 'rectangle', 
"heptagon', ‘octagon', "star'] ; 


function display (value) 
{ 

console.log (value) ; 
} 


此 语法 定义 了 带 有 参数 value 的 函数 display()。 


shapes. forEach (display) ; 


"trapezoid'， ‘'pentagons', 'hexagon’', 


变量 shapes 当前 的 数据 为 内 含 多 个 字符 串 的 数组 实例 ， 所 以 支持 函数 forEach0。 此 语句 可 使 


得 变量 shapes 的 数组 实例 的 各 个 数据 字符 串 , 被 传 入 名 称 为 display 的 函数 , 并 返 


® circle 
triangle 
rectangle 
trapezoid 
pentagons 
hexagon 
heptagon 
octagon 


star 


console.1log('') ; 


如 下 多 行 信息 : 


shapes. forEach (value => console.log(value)) ; 


此 语句 等 价 于 【shapes.forEach(display) ;】， 间 
名 称 。 


8.1.14 判断 是 否 为 数组 的 实例 


通过 箭头 函数 的 定义 ， 来 替换 函数 display() 的 


欲 判 断 特定 变量 当前 的 数据 ， 是 否 为 数组 的 实例 ,可 通过 Array 对 象 支持 的 函数 isArray() 来 达 


成 。 请 看 如 下 示例 。 
【8-1-14-Array-isArray.js】 


let instance ; 


with (console) 
{ 
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【相关 说 明 】 


声明 变量 instance。 


将 空 数组 实例 ， 赋 给 变量 instance。 


通过 Array 对 象 支持 的 函数 sArray()， 判 断 被 传 入 的 数据 〈 变 量 instance 当前 的 数据 ) ， 是 否 
为 数组 实例 。 此 语句 显示 出 布尔 值 tue， 意 味 着 变量 instance 当前 的 数据 是 数组 实例 。 


此 语句 将 Array(3) 所 产生 的 内 含 3 个 空 元 素 的 数组 实例 ， 赋 给 变量 instance。 


此 语句 显示 出 布尔 值 rue， 意 味 着 变量 instance 当前 的 数据 是 数组 实例 。 


通过 JavaScript 引擎 的 解读 ，Array(3) 和 new Array(3) 均 会 返回 内 含 3 个 空 元 素 的 数组 实例 。 


此 语句 显示 出 布尔 值 rue， 意 味 着 变量 instance 当前 的 数据 是 数组 实例 。 
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将 空 对 象 实例 ， 赋 给 变量 instance。 

log (Array.isArray (instance)) ; 

语句 显示 出 布尔 值 false， 意 味 着 变量 instance 当前 的 数据 ， 并 非 数 组 实例 。 
instance = parseInt(100 * Math.random()) ; 

将 一 个 0~ 100 的 随机 整数 值 ， 赋 给 变量 instance。 

1og (Array.isArray (instance)) : 


此 语句 显示 出 布尔 值 false， 意 味 着 变量 instance 当前 的 数据 ， 并 非 数组 实例 。 
instance = instance < 50 ; 

将 比较 表达 式 【instance < S0】 返 回 的 布尔 值 true 或 者 false， 赋 给 变量 instance 本 身 。 
log (Array.isArray (instance)) ; 


语句 显示 出 布尔 值 false， 意 味 着 变量 instance 当前 的 数据 ， 并 非 数组 实例 。 


x 


8.1.15 ”访问 并 渐次 处 理 数 组 各 元 素 的 数据 


欲 在 特定 数组 实例 中 ， 访 问 并 渐次 处 理 各 元 素 的 数据 ， 可 通过 Array 对 象 实例 支持 的 函数 
reduce() 或 reduceRight(0) 来 实现 。 请 看 如 下 两 个 示例 。 
【8-1-15-e1-Array-reduce.js】 


let numbers = [2, 3, 7, 11, 13,; 17, 19, 23, 29] ; 


let totals = numbers.reduce( (pile, current) => pile + current) ; 


console.log (totals) ; 


totals = numbers.reduce( (pile, current) => pile + current, 0) ; 


console.log (totals) ; 


totals = numbers.reduce( (pile, current) => pile + current, 200) ; 


console.log (totals) ; 
console.log('') ; 


/AL 

let n0l = [3, 7, 2, 9] ; 

let n02 = [10, 80, 50, 70] ; 
let n03 [200, 500, 100, 400] ; 


let matrix = [n01, n02, n03] ; 


function vertically add(piles, current) 
{ 
for (let i = 0; i < piles.length; i++) 
{ 
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piles[i] += current[i] ; 
} 


return piles ; 
} 


let column summations = matrix.reduce(vertically add, Array(n01.1length) .fil1(0)) ; 


console.log (column summations) ; 
console.1log('') ; 


/1 
let box = ['apple', 'guava', 'durian', 'apple', 'guava', 'peach', 'apricot', 'peach', 'durian', 
"apple'] ; 


function count fruit(piles, current) 


{ 
console.log (current) ; 


if (! (current in piles)) 
piles[current] = 1 : 
else 


piles[current]++ ; 


return piles ; 
} 


let inventory = box.reduce(count fruit, {}) ; 


console.log (inventory) ; 


【相关 说 明 】 

let numbers = [2, 3, 7, 11, 13, 17, 19, 23, 29] ; 

声明 初始 数据 为 内 含 多 个 整数 值 的 数组 实例 的 变量 numbers。 

let totals = numbers.reduce( (pile, current) => pile + current) ; 


此 语句 声明 了 变量 totals， 其 初始 数值 为 变量 numbers 的 数组 实例 中 各 整数 的 加 总 值 124。 因 
为 变量 numbers 当前 的 数据 是 数组 实例 ， 所 以 支持 函数 reduce0， 可 将 变量 numbers 数组 实例 中 的 
各 整数 值 ， 间 接 传 递 给 特定 函数 。 在 此 ， 第 头 函 数 【(pile, current) => pile + current】 有 具有 两 个 参数 
pile 与 current， 并 且 会 被 调用 9 次 ， 使 得 【pile + current】 持 续 返 回 【 在 前 一 次 被 调用 时 ， 前 几 个 
整数 值 的 加 总 值 】。 其 中 ， 参 数 current 的 数值 就 是 变量 numbers 数组 实例 里 的 其 中 一 个 整数 值 。 
因此 ， 参 数 pile 的 最 终 数值 124， 是 变量 numbers 的 数组 实例 中 各 整数 的 加 总 值 ， 最 后 成 为 
numbers.reduce() 的 返回 值 。 


console.log (totals) ; 


totals = numbers.reduce( (pile, current) => pile + current, 0) ; 


此 语句 最 后 将 将 整数 值 124， 重 新 赋 给 变量 totals。 其 中 ， 整 数值 1 24， 是 numbers.reduce() 的 
第 2 个 参数 数值 0， 加 上 【变量 numbers 的 数组 实例 中 各 整数 】 的 加 总 值 124。 


第 8 章 处 理 数组 | 241 


console.log(totals) ; 


totals = numbers .reduce((Pile，current) => pile + current, 200) ; 
此 语句 将 整数 值 324， 重 新 赋 给 变量 totals。 其 中 ， 整 数值 324， 是 numbers.reduce0 的 第 2 个 
参数 数值 200， 加 上 【变量 numbers 的 数组 实例 中 各 整数 】 的 加 总 值 124。 


console.1log(totals) ; 
console.1log('') ; 


let n01 = [3, 7, 2, 9] ; 

let n02 = [10, 80, 50, 70] ; 

let n03 = [200, 500, 100, 400] ; 

这 3 个 语句 分 别 声 明了 初始 数据 为 内 含 多 个 整数 值 的 不 同 数组 实例 的 变量 n01、n02 与 n03。 
let matrix = [n01, n02, n03] ; 


此 语句 声明 了 初始 数据 为 【内 含 3 个 一 维 数组 的 二 维 数组 实例 】 的 变量 matrix。 


function vertically add(piles, current) 
{ 
for (let i = 0; i < piles.length; i++) 
{ 
piles[i] += current[i] ; 


} 


return piles ; 


} 

此 语法 定义 具有 参数 piles 与 current 的 函数 vertically_add0。 每 次 函数 vertically_add() 被 调用 
时 ， 这 参数 piles 与 current 的 数据 均 是 一 维 数组 实例 。 其中， 函数 vertically add0 第 1 次 被 调用 时 ， 
变量 current 的 数据 是 数组 实例 [3, 7, 2, 9]， 变 量 piles 的 数据 为 数组 实例 [3，7，2，9] 。 函 数 
vertically_add() 第 2 次 被 调用 时 ， 变 量 current 的 数据 是 数组 实例 [10, 80, 50, 70]， 变 量 piles 的 数据 
为 数组 实例 [3 + 10, 7+ 80,2 + 50, 9+ 70]， 也 就 是 [13, 87, 52, 79]。 在 第 3 回合 完成 时 ， 变 量 current 
的 数据 是 数组 实例 [200, 500, 100, 400], , 而 变量 piles 的 数据 为 数组 实例 [13 + 200, 87 + 500, 52 + 100， 
79 + 400]， 也 就 是 [213, 587, 152, 479]。 


let column_summations = matrix.reduce(vertically add, Array(n01.length) .fi11(0)) ; 

此 语句 声明 了 初始 数据 为 内 含 多 个 整数 值 的 数组 实例 [213，587，152，479] 的 变量 
column_summations。 其 中 ，matrix.reduce(vertically_add, Array(n01.length).fill(0)) 可 将 变量 matrix 的 
二 维 数组 实例 中 的 各 一 维 数组 实例 ， 间 接 传 递 给 名 称 为 vertically_add 的 函数 。 

其 中 ，Array(n01.length).fill(0) 会 返回 4 个 元 素 值 均 为 0 的 数组 实例 [0, 0, 0, 0]， 所 以 matrix. 
reduce(vertically_add, Array(n01.length).fill(0)) 当 前 等 价 于 matrix.reduce(vertically_add, [0, 0, 0, 0])。 


console.log (column summations) ; 
console.1og('') ; 


let box = ['apple', 'guava', 'durian', 'apple', 'guava', 'peach', 'apricot', 'peach', 'durian', 
"apple'] ; 


声明 初始 数据 为 内 含 多 个 字符 串 的 数组 实例 的 变量 box。 
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function count fruit (Piles，current) 


{ 


console.1log (current) ; 


if (! (current in piles)) 
piles[current] = 1 ; 


在 此 , 如 果 参 数 current 的 数据 字符 串 所 代表 的 属性 名 称 , 并 不 存在 于 【参数 piles 的 对 象 实例 】 
中 ， 那 么 就 在 其 对 象 实例 中 ， 新 增 前 述 字符 串 所 代表 的 属性 ， 并 设置 其 属性 值 为 1。 


else 


piles [current]++ ; 


在 此 , 如 果 参 数 current 的 数据 字符 串 所 代表 的 


中 ， 那 么 就 在 其 对 象 实例 中 ，【 递 增 】 前 述 字符 串 所 代表 的 属性 的 数值 。 
return piles ; 


此 语句 返回 参数 piles 的 对 象 实例 。 


} 


属性 名 称 , 已 经 存在 于 【参数 piles 的 对 象 实例 】 


上 述 语法 定义 了 具有 参数 piles 与 current 的 函数 count_fruit()。 每 次 函数 count_fruit0 被 调用 时 ， 
参数 piles 的 数据 都 是 一 个 对 象 实例 ,参数 current 的 数据 则 是 变量 box 的 数组 实例 中 的 一 个 字符 串 。 
@ 第 1 次 被 调用 时 , 变量 current 的 数据 为 字符 串 'apple', 变量 piles 的 数据 为 对 象 实例 {apple: 1}。 
@ 第 2 次 被 调用 时 ， 变量 current 的 数据 为 字符 串 'guava'， 变 量 piles 的 数据 为 对 象 实例 {apple: 1， 


guava: 1}。 


@ 第 3 次 被 调用 时 , 变量 current 的 数据 为 字符 串 'durian',， 变 量 piles 的 数据 为 对 象 实例 {apple: 


guava: 1, durian: 1}. 


@ 第 4 次 被 调 


用 时 ， 变 量 current 的 数据 为 字符 串 'apple'， 变 量 piles 的 数据 为 对 象 实例 {apple: 


guava: 1, durian: 1}. 


e@ 第 5 次 被 调 


用 时 ,变量 current 的 数据 为 字符 囊 'guava'， 变量 piles 的 数据 为 对 象 实例 {apple: 


guava: 2, durian: 1}. 


日 第 6 次 被 调 


用 时 ,变量 current 的 数据 为 字符 囊 'peach'， 变量 piles 的 数 : 


guava: 2, durian: 1, peach: 1}. 
@ 第 7 次 被 调用 时 , 变量 current 的 数据 为 字符 串 'apricot', 变量 piles 的 数 : 
guava: 2, durian: 1, peach: 1, apricot: 1 } 。 


e 第 8 次 被 调 


用 时 ， 变 量 current 的 数据 为 字符 事 'peach'， 变 量 piles 的 数 


guava: 2, durian: 1, peach: 2, apricot: 1 } 。 

@ 第 9 次 被 调用 时 , 变量 current 的 数据 为 字符 串 'durian'， 变 量 piles 的 数 
guava: 2, durian: 2, peach: 2, apricot: 1}. 

e@ 第 10 次 被 调用 时 ,变量 current 的 数据 为 字符 囊 'apple', 变量 piles 的 数 : 
guava: 2, durian: 2, peach: 2, apricot: 1} 。 


let inventory = box.reduce(count fruit, {}) ; 


此 语句 声明 了 初始 数据 为 对 象 实例 {apple: 3，guava: 2，durian: 2, peach: 2, apricot: 1} 的 变量 


据 为 对 象 实例 


据 为 对 象 实例 


据 为 对 象 实例 


据 为 对 象 实例 


据 为 对 象 实例 


{apple: 


{apple: 


{apple: 


{apple: 


{apple: 


> 


Dh 
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inventory。 其 中 ，box.reduce(count_fruit 人 f}) 可 将 变量 box 的 数组 实例 中 的 各 字符 串 ， 间 接 传递 给 名 
称 为 count_fruit 的 函数 。 因 为 其 第 2 个 参数 为 空 的 对 象 实例 {}， 所 以 box.reduce0 最 终 返 回 的 对 象 


实例 仅仅 是 fapple: 3, guava: 2, durian: 2, peach: 2, apricot: 1}。 
【8-1-15-e2-Array-reduceRight.js】 


let numbers = [2, 3, 7, 11; 13, 17, 19, 237 29] 2 
let message = ''; 


function summation (pile, current) 
{ 
message += ' -> ' + current ; 


return pile + current ; 
} 


totals = numbers.reduce(summation, 0) ; 


console.log (message) ; 
console.log(totals) ; 
console.1log('') ; 


message = "''; 
totals = numbers.reduceRight (summation, 0) ; 


console.log (message) ; 
console.log(totals) ; 


【相关 说 明 】 

let numbers = [2, 3, 7, 11, 13, 17, 19, 23, 29] ; 

声明 初始 数据 为 内 含 多 个 整数 值 的 数组 实例 的 变量 numbers。 
let message = '' ; 

声明 初始 数据 为 空 学 符 串 的 变量 message。 


function summation (pile, current) 


{ 


message += ' -> ' + current ; 
此 语句 用 来 串 接 变量 message 的 字符 串 和 其 参数 current 的 数值 ， 成 为 新 字符 串 ， 并 赋 给 变 
message 本 身 o 
return pile + current ; 
此 语句 用 来 返回 【参数 pile 的 数值 ， 加 上 current 数值 】 的 结果 值 。 
} 
上 述 语 法 定义 了 具有 参数 pile 与 current 的 函数 summation()。 


totals = numbers.reduce(summation, 0) ; 


Ee 


一 
里 


在 此 语句 中 ， 调 用 函数 reduce0， 会 间接 使 得 变量 numbers 的 数组 实例 中 的 各 整数 值 ，【 顺 】 
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向 被 传递 给 名 称 为 summation 的 函数 。 此 语句 最 后 将 变量 numbers 的 数组 实例 中 各 整数 值 的 总 和 
124， 赋 给 变量 totals。 


console.log (message) ; 


此 语句 显示 出 各 整数 值 被 顺 向 排列 的 信息 【 -> 2 ->3->7-> 11-> 13 -> 17-> 19 -> 23 -> 29】 。 


console.1log(totals) ; 
console.1log('') ; 


message = ''; 


totals = numbers.reduceRight (summation, 0) ; 


在 此 语句 中 , 调用 函数 reduceRight(), 会 间接 使 得 变量 numbers 的 数组 实例 中 的 各 整数 值 ,【 反 】 
向 被 传递 给 名 称 为 summation 的 函数 。 此 语句 最 后 将 变量 numbers 的 数组 实例 中 各 整数 值 的 总 和 
124， 赋 给 变量 totals。 


console.log (message) ; 


此 语句 显示 出 各 整数 值 被 反 向 排列 的 信息 【 -> 29-> 23 -> 19 -> 17-> 13 -> 11 -> 7-> 3 -> 2】。 


8.1.16 反 转 数组 各 元 素 的 顺序 

欲 在 特定 数组 实例 中 ， 反 转 各 元 素 的 排列 顺序 ， 可 通过 Array 对 象 实例 支持 的 函数 reverse() 来 实 
现 。 请 参看 如 下 的 例子 。 

【8-1-16-Array-reverse.js】 


let flowers = ['lily', 'jasmine', 'rose', 'daisy', 'daffodil', 'camellia'] ; 


console.log (flowers) ; 
console.1log('') ; 


flowers.reverse() ; 


console.log (flowers) ; 

【相关 说 明 】 

let flowers = ['lily', 'jasmine', 'rose', "daisy'， "daffodil'， 'camellia'] ; 
声明 初始 数据 为 内 含 多 个 字符 串 的 数组 实例 的 变量 flowers。 


console.log (flowers) ; 


显示 出 ["lily", "jasmine", "rose", "daisy", "daffodil", "camellia"] 的 信息 。 
console.10g('') ; 


flowers.reverse() ; 


此 语句 返回 了 【变量 flowers 的 数组 实例 ["lily", "jasmine", "rose", "daisy", "daffodil", "camellia"] 
被 反 向 排列 之 后 的 新 数组 实例 ["camellia", "daffodil", "daisy", "rose", "jasmine", "lily"]。 
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8.1.17 ”数组 各 元 素 的 重新 排序 


欲 在 特定 数组 实例 中 ， 根 据 各 元 素 的 数值 或 字符 编码 顺序 ， 重 新 进行 升序 (ascending) 或 降 
序 〈descending) 的 排列 ， 可 通过 Array 对 象 实例 支持 的 函数 sort() 来 实现 。 关 于 数组 各 元 素 的 重新 
排序 的 综合 运用 ， 可 参考 如 下 示例 。 

【8-1-17-Array-sort.js】 


let a01 = Array.from({length: 7}, () => parseInt (100 * Math.random())) ; 


console.log(a01) ; 
let a02 = a01.sort() ; 
console.log(a02) ; 


function set descending(previous, current) 
{ 
// Swap two adjacent numbers if positive. 
return current -previous ; 
} 


let a03 = a0l.sort (set descending) ; 


console.log(a03) ; 


【相关 说 明 】 

let a01 = Array.from({length: 7}, () => parseInt (100 * Math.random())) ; 

t 语 句 声明 了 初始 数据 为 内 含 7 个 整数 值 的 数组 实例 (例如 [69, 68, 80, 15, 4, 30, 11]) 的 变量 
a01。 在 语法 【Array.from({length: 7}, 0 => parseInt(100 * Math.random()))】 中 ，f{length: 7} 使 得 被 返 
本 的 新 数组 实例 ,具有 7 个 元 素 。 篆 头 函数 【() => parseInt(100 * Math.random())】 则 是 用 来 产生 0~ 
100 的 随机 整数 值 。 


console.1log(a01) ; 


let a02 = a01.sort() ; 

语句 声明 了 初始 数据 为 内 含 7 个 整数 值 的 数组 实例 (例如 [11, 15, 30, 4, 68, 69, 80]) 的 变量 
a02。 其 中 ，a01.sort0 会 返回 【变量 a01 的 数组 实例 中 各 元 素 被 顺 向 排序 】 之 后 的 新 数组 实例 ， 例 
如 [11, 15, 30, 4, 68, 69, 80]。 


console.log(a02) ; 


function set descending(previous, current) 
{ 


// Swap two adjacent numbers if positive. 
return current -previous ; 


此 语句 返回 了 表达 式 【current-previous】 的 结果 值 。 这 个 表达 式 还 有 一 项 重要 意义 ， 也 就 是 被 
传 入 的 当前 数值 (current〉， 减 掉 被 传 入 的 上 一 个 数值 (previous〉 的 结果 值 为 正 值 ， 则 交换 前 后 
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两 个 数值 。 这 就 意味 着 ， 在 特定 数组 实例 中 的 各 整数 值 ， 会 被 由 大 至 小 地 排序 。 


上 述 语法 定义 了 带 有 参数 previous 与 current 的 函数 set_descending()。 


此 语句 声明 了 初始 数据 为 由 大 至 小 地 排序 之 后 的 新 数组 实例 (例如 [80, 69, 68, 30, 15, 11, 4]) 
的 变量 a03。 


8.1.18 判断 特定 元 素 的 存在 性 〈ES7) 


欲 判 断 特定 元 素 ， 是 否 存在 于 特定 数组 实例 中 ， 可 通过 Array 对 象 实例 支持 的 函数 indexOf() 
和 includes() 来 实现 。 请 看 如 下 示例 。 


【8-1-18-Array-includes.js】 
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7 


result = str list.includes('joystick') ; 


console.1log(result) ; 
【相关 说 明 】 
Te nt i 


声明 数据 为 数组 实例 [1, 10, 18, 23, 29, 37, 56] 的 变量 int_list。 


let 


str_ list = ['keyboard', "mouse', 'screen', 'speaker'] ; 


声明 数据 为 数组 实例 ['keyboard', 'mouse', 'screen', 'speaker"] 的 变量 str_list。 


let 


result ; 


声明 变量 result。 


resu 


在 此 语句 中 ，int_list.indexOf(23) 会 返 


变量 int_ 
cons 


resu 


lt = int list.indexOof (23) ; 


ist 的 数组 实例 中 的 第 4 个 (索引 值 为 3) 元素 。 
ole.log(result) ; 


lt = int list.includes(23) ; 


回 代表 索引 值 的 整数 值 3， 意 味 着 数值 为 23 的 元 素 ， 是 


在 此 语句 中 ，int_list.includes(23) 会 返回 布尔 值 rue， 意 味 着 数值 为 23 的 元 素 ， 确 实 存在 于 变 
量 int_list 的 数组 实例 中 。 


cons 
cons 


resu 


在 此 语句 中 ，int_list.indexOf(45) 会 返回 代表 索引 值 的 整数 值 -1， 意 味 着 数值 为 45 的 元 素 ， 并 


ole.log(result) ; 
ole.log('') ; 


lt = int list.indexOof (45) ; 


不 存在 于 变量 int_list 的 数组 实例 中 。 


cons 


resu 


ole.log(result) ; 


1t = int list.includes(45) ; 


在 此 语句 中 ，int_list.includes(45) 会 返回 布尔 值 false， 意 味 着 数值 为 45 的 元 素 ， 并 不 存在 于 变 
量 int_list 的 数组 实例 中 。 


cons 
cons 


resu 


ole.log (result) ; 
ole.10g('') ; 


lt = str list.indexOf('speaker') ; 


在 此 语句 中 ，str_listindexOf'speaker) 会 返回 代表 索引 值 的 整数 值 3， 意 味 着 数据 为 字符 
'speaker 的 元 素 ， 是 变量 str_list 的 数组 实例 中 的 第 4 个 (索引 值 为 3) 元 素 。 


cons 


resu 


ole.log(result) ; 


lt = str list.includes('speaker') ; 


王 
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存在 


五 


在 此 语句 中 , str_listincludes(speaker) 会 返 
于 变量 str_list 的 数组 实例 中 。 


console.log(result) ; 


布尔 值 true, 意味 着 数据 为 字符 串 'speaker 的 元 素 ， 


Console.1og('') ; 


result = str list.indexOf ('joystick') ; 


在 此 语句 中 ，str_list.indexOf('joystick”) 会 返回 代表 索引 值 的 整数 值 -1， 意 味 着 数据 为 字符 


贡 


'joystick' 的 元 素 ， 并 不 存在 于 变量 str_list 的 数组 实例 中 。 


变量 


console.log(result) ; 


result = str list.includes('joystick') ; 


在 此 语句 中 ，str_listindexOftjoystick) 会 返回 布尔 值 false， 意 味 着 数据 为 字符 串 'joystick' 的 元 
并 不 存在 于 变量 str_list 的 数组 实例 中 。 


8.2 数组 的 扩展 运算 (ES6 ) 


数组 实例 的 扩展 〈spread) 运算 ， 是 指 通 过 扩展 运算 符 【...】， 衔 接 【 其 数据 为 数组 实例 】 的 
的 名 称 ， 例 如 【.…a01】。 其 中 ， 变 量 a01 的 数据 为 数组 实例 [1, 2, 3]。 请 看 如 下 示例 。 
【8-2---array-spreadings.js】 


let a0l = [1, 2, 3] ; 
let a02 = [15, 25, 35] ; 
let a03 = [137, 256, 391] ; 


let result = [a01l, a02, a03] ; 
console.log (result [1]) ; 
console.log (result [2] [2]) ; 
console.log('') ; 


result = [... a0l, .».. a02, ... a03] ; 


console.log (result) ; 
console.10g('') ; 


console.log(a01) ; 
console.1log(... a01l) ; 
console.log(1l, 2, 3); 


【相关 说 明 】 
let aol = [1, 2, 3] ; 
let a02 = [15, 25, 35] ; 


let a03 


这 3 个 语句 分 别 声 明了 初始 数据 均 为 内 含 3 个 不 同 整数 值 的 数组 实例 的 变量 a01、a02 与 a03。 


[137, 256, 391] ; 
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let result = [a01，a02，a03] ; 

此 语句 声明 了 变量 result， 其 初始 数据 为 【变量 a01、a02 与 a03 的 一 维 数组 所 构成 的 二 维 数组 
实例 [[1, 2, 3], [15, 25, 35], [137, 256, 391]]。 

console.log(result[1]) ; 

result[1] 会 返回 【在 变量 result 当前 的 二 维 数组 实例 中 ， 其 索引 值 为 1 (第 2 个 ) 】 的 元 素 , 也 
就 是 子 数组 实例 [15, 25, 35]。 

console.log(result [2] [2]) ; 

result[2][2] 会 返回 【在 变量 result 当前 的 二 维 数组 实例 中 ， 其 索引 值 为 2( 第 3 个 ) 】 的 元 素 ， 
也 就 是 在 子 数 组 实例 [137, 256, 391] 中 ， 其 索引 值 为 2 (第 3 个 ) 的 元 素 的 数值 391。 


console.1log('') 


TT A 
在 此 语句 中 , 通过 扩展 运算 符 【.…】, 将 变量 result 的 数组 实例 [… [1, 2, 3], .… [15, 25, 35], … [137， 
256, 391]] 展开 成 为 [1, 2, 3, 15, 25, 35, 137, 256, 391] 。 


console.log(result) ; 
console.1og('') ; 


console.1log(a01) ， 

显示 出 变量 a01 的 数组 实例 [1, 2, 3]。 

console.log(... a01) ; 

【... a017 会 使 得 变量 a01 的 数组 实例 [1, 2, 3] 中 的 各 元 素 ， 被 展开 成 为 【1, 2, 3】。 所 以 
console.log(.… a01) 当 前 等 价 于 console.log(1, 2, 3)， 会 显示 出 【123】 的 信息 。 

console.log(l, 2, 3) ; 


显示 出 【123) 的 信息 。 
8.3 数组 元 素 的 匹配 (ES6 ) 


在 JavaScript 语言 的 单一 语句 中 , 同时 设置 多 个 变量 的 数据 时 , 例如 【vara= lb=2,c=3;】， 
可 借助 数组 实例 中 的 元 素 的 匹配 语法 ， 来 实现 同样 的 效果 ， 例 如 【var [a, b, c] = [1, 2, 3] ;】。 关 于 
数组 元 素 的 匹配 运用 ， 可 参考 如 下 示例 。 


【8-3---array-matches.js】 


var [ay b, cl = [1, 2, 3] ; 


console.log(a, b, c); 


[ay CC] = [4, 6] 3 
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console.logl(a, b, c); 

【相关 说 明 】 

var [a, by cl = [1, 2, 3] ; 

此 语句 同时 声明 了 初始 数值 为 不 同 整数 值 的 变量 a、b 与 c。 
console.logl(a, b, c); 

显示 出 变量 a、b 和 c 的 数值 【123】 。 

[lar c] = [4, 6] 3» 

设置 变量 a 的 数值 为 4， 以 及 变量 c 的 数值 为 6。 
console.log(a, b, c); 


显示 出 变量 a、b 和 e 的 最 终 数 值 【4 2 6】。 
8.4 数据 类 型 化 的 按 位 数组 ( ES6 ) 


在 JavaScript 语言 中 ,数据 类 型 化 (data-typed) 的 按 位 (bitwise) 数组 ， 会 被 JavaScript 引擎 视 为 : 

日 每 个 元 素 占用 特定 数据 类 型 (data type ) 所 需 的 内 存 空间 。 

@ 每 个 元 素 的 数据 均 会 被 按 位 〈bitwise ) 加 以 访问 。 

若 需 要 处 理 音频 、 视 频 或 是 其 他 网 络 数据 包 (network packet) 中 的 二 进 制 数 码 ， 则 可 存储 二 
进 制 数 码 ， 到 特定 数据 类 型 化 的 按 位 数组 里 。 请 参看 下 面 的 例子 。 

【8-4---typed-arrays.js】 


var buffer01 = new ArrayBuffer(32) ; 


var item01 = {} ; 


console.log (buffer01.byteLength) ; 
console.10og('') ; 


item01.id = new Uintl6Array (buffer01, 0, 1); 
item01.name = new Uint8Array (buffer01, 2, 26) ; 
item01.price = new Float32Array (buffer01, 28, 1) ; 


item01.id = 13247 ; 
item01.name = "Sweet durian candy box' ; 
item01.price = 100 : 


console.log(item0l1) ; 
console.log (item01.id) ; 
console.10g('') ; 


console.log (item01 .name) ; 
console.1log('') ; 
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console.log (item01.name[0]) ; 
console.log (item01 .name[1]) ; 
console.1log (item01 .name[2]) ; 
console.log (item01.name[3]) ; 
console.1log(item01.name[4]) ; 
console.1log('') 


console.log (item01.price) ; 


【相关 说 明 】 

Var buffer01 = new ArrayBuffer(32) ; 

此 语句 声明 了 变量 buffer01， 其 初始 数据 为 占用 32 个 字 节 (byte) 的 ArrayBuffer 对 象 实例 ， 
如 同 被 存放 于 二 进 制 的 数据 缓冲 区 (data buffer) 里 。 

Var item0l = {} ; 

声明 初始 数据 为 空 的 对 象 实例 人 的 变量 item01。 

console.log (buffer01.byteLength) ; 

此 语句 显示 出 整数 值 32, 代表 变量 buffer01 的 数据 缓冲 区 , 占用 了 32 个 字 节 长 度 (byte length) 
的 内 存 空 间 。 

item01.id = new Uintl6Array (buffer01, 0, 1) ; 

此 语句 新 增 了 变量 item01 的 对 象 实例 中 的 新 属性 id， 并 设置 其 数据 【在 变量 buffer01 的 数据 
缓冲 区 中 ， 占 用 第 1 组 (索引 值 为 0) 的 16 个 比特 位 (bit) 】 的 空间 。 

在 构造 函数 Uint16Array(buffer01, 0, 1) 中 ，【Uint16】 意 味 着 其 每 个 元 素 的 数据 ， 如 同 是 无 正 负 符 
号 的 16 个 比特 位 整数 (16-bit unsigned integer) ; 而 【(buffer01, 0, 1)】 代 表 在 变量 buffer01 的 数据 缓冲 
区 里 ， 从 其 索引 值 为 0 (第 1 个 ) 的 元 素 开始 ， 仅 仅 占用 1 个 元 素 (1 X 16 = 16 个 比特 位 ) 的 空间 。 

item01.name = new Uint8Array (buffer01, 2, 26) ; 

此 语句 新 增 了 变量 item01 的 对 象 实例 中 的 新 属性 name， 并 设置 其 数据 【在 变量 buffer01 的 数 
据 缓冲 区 中 ， 占 用 第 3 组 (索引 值 为 2) 的 8 个 比特 位 】 的 空间 。 

在 构造 函数 Uint8Array(buffer01, 2, 26) 中 ，【Uint8】 意 味 着 其 每 个 元 素 的 数据 ， 如 同 是 无 正 负 符 
号 的 8 个 比特 位 整数 (8-bit unsigned integer); 而 【(buffer01, 2, 26)】 代 表 在 变量 buffer01 的 数据 缓冲 区 
里 ， 从 其 索引 值 为 2 (第 3 个 ) 的 元 素 开 始 ， 连 续 占用 26 个 元 素 (26 X 8=208 个 比特 位 ) 的 空间 。 

item01.price = new Float32Array (buffer01, 28, 1) ; 

此 语句 新 增 了 变量 item01 的 对 象 实例 中 的 新 属性 price， 并 设置 其 数据 【在 变量 buffer01 的 数 
据 缓冲 区 中 ， 占 用 第 29 组 〈 索 引 值 为 28) 的 32 个 比特 位 】 的 空间 。 

在 构造 函数 Float32Array(buffer01, 2,27) 中 ，【Float32】 意 味 着 其 每 个 元 素 的 数据 ， 如 同 是 32 个 
比特 位 浮 点 数 (32-bit floating-point number) : 而 【(buffer01, 28, 1)】 代 表 在 变量 buffer01 的 数据 缓冲 
区 里 ， 从 其 索引 值 为 28 (第 29 个 ) 的 元 素 开 始 ， 仅 仅 占 用 1 个 元 素 (1 X 32 = 32 个 比特 位 ) 的 空间 。 

item01.id = 13247 ; 


将 整数 值 13247， 赋 给 变量 item01 的 对 象 实例 的 属性 id。 
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item01.name = "Sweet durian candy box' ; 


将 字符 串 'Sweet durian candy box'， 赋 给 变量 item01 的 对 象 实例 的 属性 name。 


item01.price = 100 ; 
将 整数 值 100， 赋 给 变量 item01 的 对 象 实例 的 属性 price。 


console.1log (item01) ; 


显示 出 {id: 13247, name: "Sweet durian candy box", price: 100} 的 信息 。 
console.log (item01.id) ; 

显示 出 整数 值 13247 的 信息 。 

console.1og (item01 .name) ; 

显示 出 字符 串 'Sweet durian candy box' 的 信息 。 
console.1og (item01.name[0]) ; 

显示 出 字符 'S'。 

console.log (item01 .name[1]) ; 

显示 出 字符 'w'。 

console.log (item01 .name[2]) ; 

显示 出 字符 'e'。 

console.1log (item01 .name[3]) ; 

显示 出 字符 'e'。 

console.log (item01 .name[4]) ; 

显示 出 字符 "。 

console.log (item01 .price) ; 


显示 出 整数 值 100。 


8.5 练习 题 


1. 试 编写 两 种 版 本 的 JavaScript 源 代码 , 均 可 转换 特定 字符 串 (例如 '2013145205307752099') ， 
成 为 【其 各 元 素 的 数据 是 单一 字符 3 的 数组 实例 ,例如 ["2", "0", "1", "3" "1" "4" "5" "2" "0", "5", "3", 
US A GE a HR RL Rl 

2. 试 编写 JavaScript 源 代码 ， 将 如 下 数组 实例 ， 动 态 输出 并 显示 出 其 元 素 的 排列 顺序 ， 能 随 
机 变化 的 数组 实例 : 


let juices = ['orange', 'apple', 'guava', 'pineapple', 'passion fruit', 'lemon', 'kiwi fruit', 


'watermelon', 'grapefruit', 'grape'] ; 


处 理 自 定义 对 象 


在 支持 面向 对 象 编 程 (OOP，object-oriented programming) 的 JavaScript 语言 里 ， 其 内 置 的 对 
象 ， 通 常 内 含 许多 属性 和 函数 /方法 。 

编程 人 员 欲 定义 特定 对 象 及 其 属性 与 函数 ， 可 以 使 用 一 对 内 含 特定 属性 与 函数 的 大 括号 ， 或 
者 先行 编写 仅仅 只 有 一 对 大 括号 弛 的 空 对 象 实例 (object instance ) ， 再 通过 后 续 的 语法 ， 逐 一 新 增 
其 属性 和 函数 。 欲 处 理 自 定义 的 对 象 实例 ， 可 通过 JavaScript 语言 支持 的 Object 或 Reflect 对 象 的 
内 置 函 数 ， 来 加 以 实现 。 


9.1 自 定 义 对 象 的 属性 名 称 、 属 性 数据 与 副本 


自 定 义 对 象 实例 的 特定 属性 的 名 称 ， 可 被 用 来 访问 特定 属性 的 数据 。 此 外 ， 在 有 些 情况 下 ， 
创建 特定 自 定 义 对 象 实例 的 副本 ， 可 大 幅 简化 编程 的 复杂 度 。 


9.1.1 对象 属性 的 名 称 或 数据 所 构成 的 数组 (ES8) 


通过 内 置 函 数 [Object.keys( 内 含 自 定义 对 象 实例 的 变量 名 称 )] 或 [ Object.getOwnPropertyNames 
(内 含 自 定义 对 象 实例 的 变量 名 称 ) 】， 均 可 获取 内 含 自 定义 对 象 实例 的 各 属性 名 称 的 数组 实例 。 
通过 内 置 函数 【Objectvalues( 内 置 自 定义 对 象 实例 的 名 称 )】， 可 返回 内 含 自 定义 对 象 实例 的 
各 属性 数据 的 数组 实例 。 请 参看 下 面 的 示例 。 


【9-1-1-keys-and-values-of-objectsjs】 


let profile array = ['Peter'， 'male', 27, 'IT', 3.5] : 

let key list01 = Object.keys (profile array) ; 

let key list02 = Object.getOwnPropertyNames (profile array) ; 
let value list = Object.values (profile array) ; 
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console.1log (key 1ist01) ; 
console.1log (key list02) ; 
console.log(value list) ; 
console.10g('') ; 


let profile object = {name: 'Peter', gender: 'male', age: 27, department: 'IT'v 
years of service: 3.5} ; 


key list01 = Object.keys (Profile object) ; 

key list02 = Object.getOwnPropertyNames (profile object) ; 
value list = Object.values(profile object) ; 
console.log(key list01) ; 

console.log(key list02) ; 

console.log(value list) ; 

console.10g('') ; 


let all entries = Object.entries(profile object) ; 


console.log(all entries) ; 


【相关 说 明 】 

let profile array = ['Peter', 'male', 27, 'IT', 3.5] ; 

声明 初始 数据 为 数组 实例 的 变量 profile_array。 

let key_list01 = Object.keys (profile array) ; 

此 语句 声明 了 变量 key_list01， 其 初始 数据 为 【在 变量 profile_array 的 数组 实例 中 ， 其 各 索引 
值 被 转换 之 后 的 字符 串 】 所 构成 的 新 数组 实例 ["0", "1", "2","3","4"]。 

let key_list02 = Object.getOwnPropertyNames (Profile_array) ; 

此 语句 声明 了 变量 key_list02， 其 初始 数据 为 【在 变量 profile_array 的 数组 实例 中 ， 其 各 索引 
值 被 转换 之 后 的 字符 串 】， 再 包含 属性 length， 所 共同 构成 的 新 数组 实例 ["0"，"1"，"2"，"3"，"4"， 
"length"]。 


let value list = Object.values (profile array) ; 


此 语句 声明 了 变量 value_list, 其 初始 数据 为 【在 变量 profile_array 的 数组 实例 中 ,其 各 元 素 的 
数据 】 所 构成 的 新 数组 实例 ["Peter", "male", 27, "IT", 3.5]。 


console.log (key list01) ; 
console.log(key list02) ; 
console.log(value list) ; 


console.10g('') ; 


let profile object = {name: 'Peter', gender: 'male', age: 27, department: ‘'IT', 
years_of_service: 3.5} ; 


声明 初始 数据 为 对 象 实例 的 变量 profile_object。 
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key_list01 = Object.keys (profile_object) ; 


语句 


语句 寻 
称 】 所 构成 的 新 数组 实例 ["name", "gender", "age", "department", "years_of service"]。 


旺 


key_list02 = Object.getOwnPropertyNames (profile object) ; 


设置 了 变量 key_list01 的 数据 为 【在 变量 profile_object 的 对 象 实例 中 , 其 各 属性 名 


设置 了 变量 key_list02 的 数据 为 【在 变量 profile_object 的 对 象 实例 中 ,其 各 属性 名 


称 】 所 构成 的 新 数组 实例 ["name", "gender", "age", "department", "years_of service"]。 


效果 相同 。 


此 语句 


由 此 可 看 出 ， 当 前 Object.keys(profile_object) 与 Object.getOwnPropertyNames (profile_object) 的 


value list = Object.values(Profile_object) ; 


1 设置 了 变量 value_list 的 数据 为 【在 变量 profile_object 的 对 象 实例 中 ， 其 各 属性 数 


据 】 所 构成 的 新 数组 实例 ["Peter", "male", 27, "IT", 3.5] 。 


console 
console 
console 
console 


log(key list01) ; 
log(key list02) ; 
log(value list) ; 
log(''); 


let all _ entries = Object.entries(profile object) ; 


Object,entries(profile_ objecb 会 返回 数组 实例 [[mame'，'Peter]，['gender，'male]，[age'，27]， 


['department', 


'IT'], ['years_of_services', 3.5]]， 使 得 在 变量 profile_object 的 对 象 实例 中 ， 其 各 属性 名 


称 和 数据 的 组 合 ( 例 如 department: TT'), 成 为 新 数组 实例 中 的 子 数组 实例 (例如 : ['department', TT'] ) 。 


9.1.2 ”精细 创建 特定 对 象 实例 的 副本 


和 欲 更 进一步 精细 创建 特定 自 定义 对 象 实例 的 副本 ， 可 通过 内 置 函数 Object.create0 来 实现 。 以 


下 举例 说 明 。 


【9-1-2-Object-create.js】 


let person = {name: 'Jason', age: 37, married: true, occupation: 'finance manager', department: 
"Finance Team'} ; 


let new_one = Object .create (person, {department: {value: 'Finance Team', writable: false}}) ; 


console. 
console. 


new one. 


console. 
console. 
console. 


console. 
console. 
console. 


log (new one) ; 
log(''); 


name = 'Alex' ; 


log (new one .name) ; 
log (new_one department) ; 
log(''); 


log(new one.age) ; 
log(new one. proto .age) ; 
log(''); 
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new_one department = 'IT' ; 
console.log (new one.department) ; 


A 
let my love = Object.create({fname: 'Cindy', occupation: 'angel'}, {age: {value: 18, writable: 
false, enumerable: false, configurable: false}}) ; 


console.log(my love.age) ; 
console.1log('') ; 


my love.age = 27 : 


console.log(my love.age) ; 
console.10g('') ; 


for (let property in my love) 
{ 

console.1og (property) ; 
} 


【相关 说 明 】 


let person = {name: 'Jason', age: 37, married: true, occupation: 'finance manager', department: 
"Finance Team'} ; 


声明 初始 数据 为 对 象 的 实例 (object instance) 的 变量 person。 

let new_one = Object .create (person, {department: {value: 'Finance Team', writable: false}}); 

此 语句 声明 了 初始 数据 为 对 象 实例 的 变量 new_one， 其 中 ， 这 个 对 象 实例 继承 自 变 量 person 
的 对 象 实例 的 原型 (prototype) 定义 。 在 此 , 新 属性 department 的 初始 数据 为 字符 串 'Finance Team'， 
而 且 被 设置 为 不 可 再 次 被 写 入 〈writable: false) 新 数据 的 属性 。 


console.log(new one) ; 


此 语句 虽然 在 网 页 浏览 器 的 调试 工具 【Console】 面 板 里 ， 仪 仅 显 示 出 {department: "Finance 
Team"} 的 信息 ， 但 是 此 信息 可 被 展开 并 显示 出 【可 再 度 被 展开 】 的 内 置 属性 【__proto_】。 一 旦 
点 击 内 置 属性 【__proto _】 的 项 目 ， 便 可 看 到 继承 自 变量 person 的 对 象 实例 中 的 众 属性 age、 


department、married、name 与 occupation。 


console.10g('') ; 


new_one .name = 'Alex' ; 


将 字符 串 'Alex' 赋 给 变量 new_one 对 象 实例 的 属性 name。 
console.log (new_one .name) ; 


显示 出 'Alex' 的 信息 。 


console.log (new_one.department) ; 


显示 出 'Finance Team' 的 信息 。 
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console.10g('') ; 


console.log (new one.age) ; 
console.log(new one. proto .age); 


这 两 个 语句 均 显示 出 【在 变量 new_one 的 对 象 实例 中 ， 其 属性 age】 的 数值 37。 这 个 属性 是 
继承 自 变量 person 的 对 象 实例 。 


console.1log('') ; 


Finance Team 
new_one.department = 'IT' ; 


此 语句 试图 将 字符 串 'TT'， 赋 给 变量 new_one 的 对 象 实例 中 的 属性 department， 但 是 会 失败 ! 
这 是 因为 属性 department 在 变量 new_one 被 声明 的 阶段 时 ， 就 已 经 被 设置 为 不 可 再 次 被 写 入 
(writable: false) 了 。 


console.1og (new_one .department) ; 
此 语句 仍然 显示 出 new_one.department 的 初始 数据 'Finance Team'。 


console.1og('') ; 


let my_love = Object.create ({name: 'Cindy', occupation: 'angel'}, {age: {value: 18, writable: 
false, enumerable: false, configurable: false}}) ; 


此 语句 声明 了 初始 数据 为 对 象 实例 的 变量 my_love, 其 中 ,这 个 对 象 实例 继承 自 对 象 实例 {name: 
'Cindy', occupation: 'angel" 的 原型 定义 。 在 此 ， 其 新 属性 age 的 初始 数值 为 18, 但 是 被 设置 为 不 可 
再 次 被 写 入 (writable: false) 、 不 可 被 迭代 / 列举 (enumerable: false) 、 不 可 再 次 被 删除 / 修改 / 
设置 (configurable: false) 。 

console.1og (my_love.age) ; 

显示 出 整数 值 18。 

console.1og('') ; 


my_love.age = 27 

此 语句 试图 将 整数 值 27 赋 给 变量 my_love 的 对 象 实例 中 的 属性 age， 但 是 会 失败 ! 这 是 因为 
属性 age 在 变量 my_love 被 声明 的 阶段 时 ， 就 已 经 被 设置 为 不 可 再 次 被 写 入 〈writable: false) 以 及 
不 可 再 次 被 删除 / 修改 / 设置 (configurable: false) 。 其 中 ，writable 或 configurable 被 设置 为 false 
时 ， 会 使 得 属性 age 无 法 再 次 被 写 入 新 数据 。 

console.1log (my_love.age) ; 


此 语句 仍然 显示 出 my_love.age 的 初始 数值 18。 


console.10g('') ; 


for (let property in my_love) 
此 for 语句 只 会 迭代 两 次 。 在 第 1 次 迭代 时 ， 变 量 property 的 数据 为 字符 串 mame'; 在 第 2 次 
迭代 时 ， 变 量 property 的 数据 为 字符 串 'o0ccupation'。 请 留意 ， 变 量 property 的 数据 不 会 变 成 字符 串 
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"age'， 是 因为 属性 age 在 变量 my_love 被 声明 的 阶段 时 ， 就 已 经 被 设置 为 了 不 可 友 代 / 列举 


(enumerable: false) 了 。 


9.2 自 定义 对 象 实例 之 间 的 相同 性 与 合并 


本 节 即 将 说 明 ， 如 何 判断 两 个 自 定义 对 象 实例 之 间 的 数据 是 否 完全 相同 ， 或 是 将 另 一 个 对 象 
实例 的 所 有 成 员 《〈 属 性 和 函数 ) 合并 至 当前 对 象 实例 中 。 


9.2.1 判断 两 个 对 象 实例 的 数据 是 否 完全 相同 (ES6) 


通过 内 置 函 数 【Object:is( 内 含 对 象 实例 1 的 变量 名 称 , 内 含 对 象 实例 2 的 变量 名 称 )】， 可 判 
断 两 个 对 象 实例 的 数据 ， 是 否 完全 相同 。 请 参看 如 下 示例 。 
【9-2-1-Object-is.js】 


console.1og(Object.is('mars'，'Mars')) ; 
console.1og(Object.is('Mar' + 's', 'Mars')) ; 
console.10og('') ; 


console.1log (Object.is (document .body, document .body)) ; 
console.1log('') ; 


console.log (Object.is([], [])) ; 
console.log (Object.is(['good', 'day'], ['goo0d', 'day'])) ; 
console.1l0g('') ; 


var profile0l1 = {name: 'Jasper'} ; 
var profile02 = {name: 'Jasper'} ; 


console.1log (Object .is (profile01, profile02)) ; 
console.10g('') ; 


console.log(Object.is (null, null)) ; 
console.log (Object .is (null, undefined)) ; 
console.1og (Object .is (undefined, undefined)) ; 
console.1og('') ; 


console.log (Object.is(NaN, 0 % 0)) ; 
console.10g('') ; 


console.log (Object.is(0, -0)) ; 
console.log (Object.is(-0, -0)) ; 


【相关 说 明 】 
console.log (Object.is('mars', 'Mars')) ; 


Object.is( 参 数 1 的 数据 , 参数 2 的 数据 ) 若 返 


五 


布尔 值 tue, 则 代表 参数 1 与 参数 2 内 含 相同 的 
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数据 。 在 此 ，Object.is('mars', "Mars'") 返 回 布 尔 值 false。 


console.log (Object.is('Mar' + 's', 'Mars')) ; 


Object.is("Mar' + 's', "Mars') 返 回 布尔 值 true。 


console.1log('') ; 


console.1og (Object .is (document .body, document .body)) ; 


Object.is(document.body, document.body) 返 回 布 尔 值 true。 


console.1log('') ; 

console.log(Object.is([], [])) ; 

ject.is([], []) 返 回 布尔 值 人 lse， 代 表 两 个 空 数组 实例 ]， 占 用 不 同 的 内 存 引 址 。 
console.log (Object.is(['goo0d', 'day'], ['good', 'day'])) ; 


Objectis(Objectis([good'，'day]，['good，'day])) 返 回 布尔 值 false， 代 表 两 个 数组 实例 ['good'， 
'day]， 也 占用 不 同 的 内 存 引 址 。 


console.1log('') ; 


0 


I= 列 


Var Profile01 = {name: 'Jasper'} ; 
Var profile02 = {name: 'Jasper'} ; 


console.log (Object .is (profile01, profile02)) ; 


Object.is(profile01, profile02) 返 回 布尔 值 false, 意味 着 两 个 对 象 实例 {name: 'Jasper} 占 用 不 同 的 
内 存 引 址 。 


console.1log('') ; 


console.1log (Object.is(null, null)) ; 


Object.is(null, nul) 返 回 布尔 值 true。 


console.log(Object.is (null, undefined)) ; 


Object.is(null, undefined) 返 回 布尔 值 false。 


console.1log (Object.is (undefined, undefined)) ; 


Object.is(undefined, undefined) 返 回 布尔 值 true。 


console.10g('') ; 


console.log (Object.is(NaN, 0 % 0)) ; 


Object.is(NaN, 0 % 0) 返 回 布 尔 值 tue， 间 接 意味 着 【0 % 0】 无 法 被 评估 成 为 数值 ， 而 返回 原 


始 常量 NaN (nota number) 。 


console.log (Object.is(0, -0)) ; 


Object.is(0, -0) 返 回 布尔 值 false， 意 味 着 0 和 -0 仍然 被 视 为 不 同 的 数据 。 


console.log (Object.is(-0, -0)) ; 
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Objectis(-0, -0) 返 回 布尔 值 tue。 


9.2.2 ”合并 多 个 对 象 实例 的 所 有 成 员 (ES6) 

通过 内 置 函数 Objectassign(0)， 可 将 多 个 对 象 实例 的 所 有 成 员 〈 属 性 和 函数 ) ， 合 并 至 特定 对 
象 实例 中 。 

【9-2-2-Object-assign.js】 


var profile = {name: 'Sean'，gender: 'male'，age: '25'}; 
var job = {department: 'IT', position: 'software engineer', monthly salary: "10000' } ; 


var info = {log time: new Date() .上 toLocaleString()} ; 
Object.assign (info, profile, job) ; 


console.log (info) ; 
console.log(info.name) ; 
console.log(info['position']) ; 


【相关 说 明 】 


Var profile = {name: 'Sean', gender: 'male', age: '25'} ; 
var job = {department: 'IT', position: 'software engineer', monthly_ salary: '10000' } ; 


这 两 个 语句 声明 了 初始 数据 为 不 同 对 象 实例 的 变量 profile 与 job。 

var info = {1og_time: new Date () .toLocaleString()} ; 

此 语句 声明 了 初始 数据 为 仅 具 单 一 属性 log time 的 对 象 实例 (例如 flog time: "2019/1/15 上 午 
10:24:21"} ) 的 变量 info。 其 属性 log time 的 数据 是 由 【new Date().toLocaleString()】 动 态 产 生 的 日 
期 与 时 间 的 字符 串 ， 例 如 '2019/1/15 上 午 10:24:21'。 

Object.assign (info, profile, job) ; 

此 语句 将 变量 profile 与 job 的 对 象 实例 中 的 各 成 员 《〈 属 性 和 函数 ) ， 新 增 至 变量 info 的 对 象 
实例 中 ， 最 终 变 成 {log_time: "2019/1/15 上 午 10:24:21", name: "Sean", gender: "male"，age: "25", 


department: "IT", position: 'software engineer, monthly_salary: '10000'} 。 


console.log (info) ; 
console.log (info.name) ; 


显示 出 字符 串 'Sean' 的 信息 。 


console.log(info['position']) ; 


info[position] 和 info.position 均 可 返回 字符 串 'software engineer'。 
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9.3 对象 实例 的 简短 自 定 义 语 法 (ES6 ) 


JavaScript 语言 可 通过 新 对 象 实例 的 简短 自 定义 语法 ， 引 用 已 经 被 声明 的 各 变量 名 称 ， 来 创建 
相同 于 各 变量 名 称 的 各 成 员 名 称 。 请 参看 如 下 示例 。 


【9-3---shorthand-syntax-of-object-definition.js】 


Var name = "Jasper' ; 

Var age = 33 : 

Var gender = 'male' ; 

Var person = {name, age, gender} ; 


console.log (person) ; 
console.log (person.name) ; 
console.1og (person['age']) ; 
console.1og('') ; 


with (person) console.log (gender) ; 


【相关 说 明 】 


Var name = 'Jasper' ; 
Var age = 33; 
var gender = 'male' ; 


这 3 个 语句 分 别 声明 了 初始 数据 为 字符 串 或 整数 值 的 变量 name、age 和 gender。 

Var person = {name, age, gender} ; 

此 语句 声明 了 变量 person， 其 初始 数据 为 变量 name、age 和 gender 的 数据 所 共同 构成 的 对 象 
实例 {name: "Jasper", age: 33, gender: "male"} 。 

console.log (Person) ; 

显示 出 {name: "Jasper", age: 33, gender: "male"} 的 信息 。 

console.log (Person.name) ; 


显示 出 字符 串 Jasper 的 信息 。 


console.log (Person['age']) ; 
person['age] 和 person.age 均 会 返回 整数 值 33。 
console.10g('') ; 


with (person) console.log(gender) ; 

此 语句 等 价 于 【console.log(person.gender)】， 可 显示 出 字符 串 'male' 的 信息 。 通 过 【with (内 含 
对 象 实例 的 变量 名 称 ) { 访问 其 属性 的 多 个 语句 }】， 可 简化 其 大 括号 里 的 语法 【内 含 对 象 实例 的 
变量 名 称 .属性 名 称 】 为 简易 的 语法 【属性 名 称 】。 例如 ， 从 语法 person.gender 简化 为 语法 gender。 
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9.4 自 定义 对 象 实例 的 动态 成 员 名 称 (ES6 ) 


二 


Eo] 


表达 式 返 


的 字符 串 ,作为 自 定义 对 象 实例 的 特定 成 员 名 称 。 


JavaScript 语言 支持 将 特定 字符 
请 参看 以 下 示例 。 
【9-4---evaluated-member-name-of-object.js 】 
let id = 'CN24' ; 


var one item = {[id +' name']: 'video set', [id + ' price']: 300} ; 


console.log(one item) ; 
console.log (one item.CN24 name) ; 
console.log(one item[id + ' price']) ; 


【相关 说 明 】 

let id = 'CN24' ; 

声明 初始 数据 为 字符 串 'CN24' 的 变量 id。 

Var one_item = {[id +' name']: 'video set', [id + ' price']: 300} ; 

此 语句 声明 了 初始 数据 为 对 象 实例 {CN24_name: "video set"，CN24_price: 300} 的 变量 
one_item 。 

请 留意 ， 通 过 在 大 括号 里 的 中 括号 〈 例 如 [id +_name]) ， 可 动态 赋予 特定 对 象 实例 的 新 成 员 
的 名 称 〈 例 如 CN24_name) 。 

console.log(one item) ; 

显示 出 {CN24_name: "video set", CN24_price: 300} 的 信息 。 


console.1log (one item.CN24 name) ; 


one_item.CN24_name 、one item['CN24_name'] 和 one item[id +' name'] 当 前 均 可 返回 字符 串 


”Video set'。 


console.log(one item[id + '_price']) ; 


洋 


one_item[id +'_price']、one_item.CN24_price 和 one_item['CN24_price'] 当 前 均 可 返 值 300。 


9.5 “对象 实例 的 匹配 ( ES9 ) 


JavaScript 语言 可 通过 对 象 实例 的 匹配 (match) 语法 ， 同 时 设置 多 个 变量 的 数据 。 请 参看 如 下 
示例 。 
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【9-5---object-matches.js】 


var person01 = {name: 'Jimmy', age: 20, gender: 'male'} ; 


Var person02 = {name: 'Erica', age: 40, gender: 'female'} ; 
Var person03 = {name: 'Frankie', age: 30, gender: 'male'} ; 
Var person04 = {name: 'Alexander', age: 28, gender: 'male'} ; 


Var {name, age, gender} = person01 ; 


console.log (name, age, gender) ; 
console.1o0g('') ; 


({name, age, gender} = person02) ; 


console.log (name, age, gender) ; 
console.1log('') ; 


Var {name: value01，age: value02, gender: value03} = person03 ; 
console.log(value01, value02, value03) ; 
Var {name, ... others} = person04 ; 


console.log (name, others) ; 
【相关 说 明 】 


Var person01 = {name: 'Jimmy', age: 20, gender: 'male'} ; 
Var person02 = {name: 'Erica', age: 40, gender: 'female'} ; 
Var person03 = {name: 'Frankie', age: 30, gender: 'male'} ; 
Var person04 = {name: 'Alexander', age: 28, gender: 'male'} ; 


这 4 个 语句 分 别 声明 了 变量 person01、person02、person03 与 person04, 其 初始 数据 分 别 为 【其 
属性 名 称 均 相 同 、 其 属性 数据 可 以 不 相同 】 的 对 象 实例 。 

var { name, age, gender } = person01l ; 

此 对 象 实例 的 匹配 语法 ， 同 时 声明 了 初始 数据 为 字符 串 Jimmy' 的 变量 name、 初 始 数值 为 20 
变量 age， 以 及 初始 数据 为 字符 串 'male' 的 变量 gender。 

console.log (name, age, gender) ; 


显示 出 【Jimmy 20 male】 的 信息 。 


({name, age, gender} = person02) ; 


因为 变量 name、age 和 gender 已 经 被 声明 过 了 ! 若 要 再 次 通过 对 象 实例 的 匹配 语句 ， 设 置 这 
3 个 变量 的 新 数据 ， 则 必须 将 对 象 实例 的 匹配 语法 ， 放 置 于 一 对 小 括号 之 内 才 行 。 此 语句 使 得 变量 
name 的 数据 成 为 字符 串 'Erica'、 变 量 age 的 数值 成 为 整数 值 40， 以 及 变量 gender 的 数据 成 为 字符 


昌 


串 'female'。 


console.log (name, age, gender) ; 


显示 出 【Erica 40 female】 的 信息 。 


var {name: value01，age: value02, gender: value03} = Person03 ; 
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此 对 象 实例 的 匹配 语法 ， 同 时 声明 了 初始 数据 为 字符 串 'Frankie' 的 变量 value01、 初 始 数值 为 
30 的 变量 value02， 以 及 初始 数据 为 字符 串 'male' 的 变量 value03 。 

请 留意 ， 在 此 语句 中 的 name、age 和 gender， 并 不 是 变量 名 称 ， 而 是 用 于 匹配 此 对 象 实例 的 
属性 名 称 。 


console.log (value01, value02, value03) ; 

显示 出 【Frankie 30 male】 的 信息 。 

var {name, ... others} = person04 ; 

此 对 象 实例 的 匹配 语法 ， 同 时 声明 了 初始 数据 为 字符 串 'Alexander 的 变量 name， 以 及 初始 数 
据 为 对 象 实例 {fage: 28, gender: "male"} 的 变量 others。 


console.log (name, others) ; 


显示 出 【Alexander】 与 【 {age: 28, gender: "male"}】 的 信息 。 


9.6 练 习 题 


1. 已 知 如 下 3 个 对 象 实例 : 


let Profile01 = {name: 'Rlex Lee', age: 27, gender: 'male'，married: false} ; 

let profile02 = {name: 'Alex Lee', profession: 'software engineer', annual salary: 15000, 
company: 'Weird Alien'} ; 

let profile03= {name: 'Alex Lee', country: 'China', place: 'Beijing', phone number: 'secret'}; 


试 编写 JavaScript 代码 ， 以 合并 3 个 对 象 实例 ， 成 为 全 新 的 对 象 实例 。 

2. 已 知 存在 数据 为 对 象 实例 name: 'computer, price: 5000} 的 变量 product。 试 编写 JavaScript 
源 代 码 ， 以 替 变量 product 的 对 象 实例 ， 额 外 设置 【被 写 入 新 数据 均 无 效 】 的 属性 manufacturer 和 
其 初始 数据 "~O_O~"， 以 及 属性 model 和 其 初始 数据 "+^v^+"。 


第 10 章 
处 理 日 期 和 时 间 


通过 内 置 的 Date 对 象 实例 的 函数 / 方法 ，JavaScript 语言 可 以 处 理 非常 复杂 的 日 期 与 时 间 的 
运算 、 转 换 和 显示 。 


10.1 处 理 日 期 


各 国 的 日 期 显示 格式 不 尽 相同 ， 而 且 计 算出 不 同日 期 中 两 个 时 间 点 之 间 的 差距 ， 是 很 复杂 的 ; 
但 是 ， 却 可 通过 Date 对 象 实例 支持 的 相关 函数 ， 轻 松 解决 此 类 问题 。 


10.1.1 获取 日 期 相关 数据 


通过 【内 含 Date 对 象 实例 的 变量 名 称 】: 

@ ”衔接 【.getDate0】 可 返回 在 特定 日 期 中 ， 代 表 特 定 月 份 第 几 日 的 整数 值 。 

ee 衔接 【.getDay0】， 可 返回 在 特定 日 期 中 ， 代 表 星 期 几 的 整数 值 。 

衔接 【.getMonth()】〗， 可 返回 在 特定 日 期 中 ， 代 表 月 份 的 整数 值 。 

衔接 【.getFullYear()】〗 可 返回 在 特定 日 期 中 ， 代 表 公元 年 份 的 整数 值 。 

e 衔接 【.getUTCDate0】【.getUTCDay0】【.getUTCMonthO0〗 和 【.getUTCFullYear0】〗 可 分 
别 返 回 当 前 【协调 世界 时 (UTC, coordinated universal time)】〗 的 相关 整数 值 。 


关于 获取 日 期 相关 数据 的 综合 调试 ， 可 参看 如 下 示例 。 
【10-1-1-date-gettings.js】 


let special = new Date('2014/5/20') ; 


console.log (special) ; 
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console.10g('') ; 
console.1log (special.getDate()) ; 


// return value 0 represents 'Sunday'. 
console.log(special.getDay()) ; 


// return value 0 represents 'January', and 11 represents 'December'. 
console.log (special.getMonth()) ; 


console.1log (special .getFullYear()) ; 
console.1log('') ; 


console.1log (special.getUTCDate()) ; 
console.log (special .getUTCDay()) ; 
console.log(special.getUTCMonth()) ; 
console.log (special .getUTCFullYear ()) ; 
console.10g('') ; 


【相关 说 明 】 
let special = new Date('2014/5/20') ; 


此 语句 声明 了 变量 special， 其 初始 数据 为 内 含 日 期 2014/5/20 相关 数据 的 Date 对 象 实例 。 
2014/5/20 在 此 被 视 为 本 地 (中 国 ) 的 日 期 。 


console.log(special) ; 


显示 出 类 似 【Tue May 20 2014 00:00:00 GMT+0800 (China Standard Time)】 的 信息 。 


console.1log('') ; 


console.log (special .getDate()) ; 


special.getDate() 会 返回 上 述 Date 对 象 实例 中 的 特定 月 份 第 几 日 的 整数 值 20。 


// return value 0 represents 'Sunday'. 
console.log(special.getDay()) ; 


special.getDay0 会 返回 上 述 Date 对 象 实例 中 的 星期 几 的 数值 2, 也 就 是 代表 星期 二 。 若 返 开 
则 代表 星期 日 ， 若 返回 6， 则 代表 星期 六 。 


// return value 0 represents 'January', and 11 represents 'December'. 
console.log (special.getMonth()) ; 


special.getMonth() 会 返回 上 述 Date 对 象 实例 中 的 月 份 的 数值 4。 若 返回 0， 代 表 1 月 ; 若 返 
11， 则 代表 12 月 。 

console.log (special .getFullYear()) ; 

special.getFullYear() 会 返回 上 述 Date 对 象 实例 中 的 公元 年 份 的 数值 2014。 


console.1log('') ; 


0， 


互 


console.log(special.getUTCDate ()) ; 


special.getUTCDate() 会 先 将 变量 special 的 Date 对 象 实例 中 的 本 地 日 期 2014/5/20, 转换 成 为 协 
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调 世 界 时 (UTC, coordinated universal time) 的 日 期 2014/5/19, 再 返回 其 特定 月 份 第 几 日 的 数值 19。 


console.1log(special.getUTCDay()) ; 


二 


世界 时 的 日 期 2014/5/19， 再 返回 其 星期 几 的 数值 1 (星期 一 ) 。 


console.1log (special .getUTCMonth()) ; 


special.getUTCDay() 会 先 将 变量 special 的 Date 对 象 实例 中 的 本 地 日 期 2014/5/20, 转换 成 为 协 


special.getUTCMonth() 会 先 将 变量 special 的 Date 对 象 实例 中 的 本 地 日 期 2014/5/20,， 转换 成 为 
协调 世界 时 的 日 期 2014/5/19， 再 返回 其 月 份 的 数值 4 (5 月 ) 。 若 返回 0， 则 代表 1 月 ; 若 返 回 11， 


则 代表 12 月 。 
console.1log(special.getUTCFullYear()) ; 


special.getUTCFullYear() 会 先 将 变量 special 的 Date 对 象 实例 中 的 
为 协调 世界 时 的 日 期 2014/5/19， 再 返回 其 年 份 的 数值 2014。 


10.1.2 ”设置 日 期 相关 数据 


通过 【内 含 Date 对 象 实例 的 变量 名 称 】: 


世界 时 (UTC, coordinated universal time)】〗 的 相关 整数 值 . 
关于 设置 日 期 相关 数据 的 综合 调试 ， 可 参看 如 下 示例 。 
【10-1-2-date-settings.js】 
let special = new Date('2013/5/30') ; 


console.log (special) ; 
console.1log('') ; 


special. setFullYear (2014) ; 
special.setMonth (11) ; 
special.setDate(1) ; 


console.log (special) ; 
console.10g('') ; 


special.setUTCFullYear (2014) ; 
special.setUTCMonth (11) ; 
Special.setUTCDate (1) ; 


console.log (special) ; 


本 地 日 期 2014/5/20， 转 换 成 


衔接 【.setDate()〗 可 设置 在 特定 日 期 中 ， 代 表 特 定 月 份 第 几 日 的 整数 值 。 

衔接 【.setMonth0】 可 设置 在 特定 日 期 中 ， 代 表 月 份 的 整数 值 。 

衔接 【.setFullYear(0)〗， 可 设置 在 特定 日 期 中 ， 代 表 公 元 年 份 的 整数 值 。 

衔接 【.setUTCDate0】【.setUTCMonthO0】〗 和 【.setUTCFullYear0】〗 ， 可 分 别 设置 当前 【协调 
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【相关 说 明 】 

let special = new Date('2013/5/30') ; 

此 语句 声明 了 变量 special， 其 初始 数据 为 内 含 日 期 2013/5/30 相关 数据 的 Date 对 象 实例 。 
2013/5/30 在 此 被 视 为 本 地 〈 中 国 ) 的 日 期 。 


console.1og(special) ; 


显示 出 类 似 【Thu May 30 2013 00:00:00 GMT+0800 (China Standard Time)】 的 信息 。 
console.10g('') 

special.setFullYear (2014) ; 

重新 设置 变量 special 的 Date 对 象 实例 中 的 年 份 数值 为 2014。 

special.setMonth(11) ; 

重新 设置 变量 special 的 Date 对 象 实例 中 的 月 份 数值 为 11 (12 月 ) 。 
special.setDate(1) ; 

重新 设置 变量 special 的 Date 对 象 实例 中 的 特定 月 份 第 几 日 的 数值 为 1。 


console.log(special) ; 


显示 出 类 似 【Mon Dec 01 2014 00:00:00 GMT+0800 (China Standard Time)】 的 信息 。 


console.1log('') ; 


special.setUTCFullYear (2014) ; 


此 语句 依据 协调 世界 时 (UTC, coordinated universal time) ， 重 新 设置 变量 special 的 Date 对 象 
实例 中 的 年 份 数 值 为 2014。 

special.setUTCMonth(11) ; 

依据 协调 世界 时 ， 重 新 设置 变量 special 的 Date 对 象 实例 中 的 月 份 数值 为 11 (代表 12 月 ) 。 

Special.setUTCDate (1) ; 


依据 协调 世界 时 ， 重 新 设置 在 变量 special 的 Date 对 象 实例 中 的 特定 月 份 第 几 日 的 数值 为 1。 


console.log (special) ; 


显示 出 类 似 【Tue Dec 02 2014 00:00:00 GMT+0800 (China Standard Time)】 的 信息 。 


10.1.3” 带 有 日 期 的 格式 化 字符 串 


通过 【内 含 Date 对 象 实例 的 变量 名 称 】 衔 接 【.toDateString0】、【 .toISOString()】、【.toJSONO】 
和 【.toLocaleDateString()】， 可 分 别 返 回 不 同 格式 的 日 期 字符 串 。 请 参看 如 下 示例 。 


【10-1-3-date-formatting-strings.js】 


let today = new Date() ; 
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【相关 说 明 】 


此 语句 声明 了 变量 today, 其 初始 数据 为 内 含 当前 日 期 与 时 间 (例如: Thu Nov 29 2018 05:50:53 
GMT+0800 (China Standard Time)) 的 Date 对 象 实例 。 


显示 出 类 似 【Thu Nov 29 2018 05:50:53 GMT+0800 (China Standard Time)】 的 信息 。 


显示 出 类 似 【Thu Nov 29 2018】 本 地 日 期 的 信息 。 


这 两 个 语句 均 会 将 本 地 的 日 期 与 时 间 , 先 转换 成 为 协调 世界 时 的 日 期 与 时 间 , 再 依据 ISO 8601 
格式 ， 显 示 出 类 似 【2018-11-29T21:50:53.319Z】 的 信息 。 


显示 出 类 似 【2018/11/29】 的 简略 的 本 地 日 期 。 
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变量 today 的 数据 类 型 为 object (对 象 ) ， 所 以 【typeof today】 返 回 字 符 串 'object'。 
log() ; 
log (typeof today.toDatestring()) ; 
log (typeof today.torSOstring()) ; 


log (typeof today.toJSON()) ; 
log (typeof today.toLocaleDateString()) ; 


这 4 个 语句 均 显示 出 'string'， 意 味 着 today.toDateString()、today.toISOString()、today.toJSON() 
与 today.toLocaleDateString() 所 返回 的 数据 ， 均 是 字符 串 (string) 。 


10.2 处 理 时 间 


虽然 各 国 的 时 间 显 示 格 式 大 致 相同 ， 但 是 计算 出 不 同日 期 中 两 个 时 间 点 之 间 的 差距 ， 仍 是 过 
于 复杂 的 问题 ， 但是， 却 可 通过 Date 对 象 实例 支持 的 时 间 相关 函数 ， 轻 松 解 决 此 类 问题 。 


10.2.1 获取 时 间 相 关 数 据 


通过 【内 含 Date 对 象 实例 的 变量 名 称 】: 

衔接 【.getHours()】〗， 可 返回 在 特定 时 间 点 中 ， 代 表 小 时 数 的 整数 值 。 

衔接 【.getMinutes()】〗， 可 返回 在 特定 时 间 点 中 ， 代 表 分 钟 数 的 整数 值 。 

j 接 【.getSeconds()〗»〗， 可 返回 在 特定 时 间 点 中 ， 代 表 秒 数 的 整数 值 。 

衔接 【.getMilliseconds0】 可 返回 在 特定 时 间 点 中 ， 代 表 毫 秒 数 的 整数 值 。 

衔接 【.getTime0】， 可 返回 从 纪元 时 间 (epoch time )， 也 就 是 公元 1970 年 1 月 1 日 0 时 0 分 
0 秒 开 始 ， 至 特定 时 间 点 为 止 的 毫秒 数 。 


此 外 , 通过 【内 含 Date 对 象 实例 的 变量 名 称 】 衔 接 【.getUTCHours()】、【.getUTCMinutes()】、 
【.getUTCSeconds()】、【.getUTCMilliseconds()】 和 【.getTimezoneOffset0))】， 可 返回 【协调 世界 
时 (UTC, coordinated universal time)】 的 特定 时 间 点 的 相关 整数 值 。 请 参看 如 下 示例 。 


【10-2-1-time-gettings.js】 


ee ee ee 。 
EE 


let current = new Date() ; 


with (console) 

{ 
log (current .getHours ()) ; 
log (current .getMinutes()) ; 
log (current .getSeconds()) ; 
log (current .getMilliseconds()) ; 
log (current .getTime()) ; 
log(''); 


log (current .getUTCHours ()) ; 
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【小 时 数 】， 例 如 22。 


log (current .getUTCMinutes ()) ; 

log (current .getUTCSeconds ()) ; 

log (current .getUTCMilliseconds()) ; 
log('') ; 


log (current .getTimezoneOffset ()) ; 
} 


【相关 说 明 】 


let current = new Date() ; 


此 语句 声明 了 变量 current， 其 初始 数据 为 内 含 当 前 日 期 与 时 间 的 Date 对 象 实例 。 


with (console) 
{ 


log (current .getHours ()) ; 


显示 出 变量 current 的 Date 对 象 实例 中 的 本 地 【小 时 数 】， 例 如 6。 


log (current .getMinutes()) ; 


显示 出 变量 current 的 Date 对 象 实例 中 的 本 地 【分 钟 数 】， 例 如 13。 


log (current .getSeconds()) ; 


显示 出 变量 current 的 Date 对 象 实例 中 的 本 地 【 秒 数 】， 例 如 30。 


log (current .getMilliseconds()) ; 


显示 出 变量 current 的 Date 对 象 实例 中 的 本 地 【毫秒 数 】， 例 如 883。 


1og (current .getTime()) ; 


current.getTime() 返 回 【 从 1970/1/1 00:00:00:000 (0 时 0 分 0 秒 0 毫秒 ) 开始 ， 到 变量 current 


的 Date 对 象 实例 中 的 本 地 时 间 点 为 止 】 的 【毫秒 数 】， 例 如 1543465500880。 


log('') ; 


log (current .getUTCHours ()) ; 


依据 协调 世界 时 (UTC, coordinated universal time) ， 显 示 出 变量 current 的 Date 对 象 实例 中 的 


log (current .getUTCMinutes ()) ; 

依据 协调 世界 时 ， 显 示 出 变量 current 的 Date 对 象 实例 中 的 【分 钟 数 】， 例 如 13。 
log (current .getUTCSeconds ()) ; 
依据 协调 世界 时 ， 显 示 出 变量 current 的 Date 对 象 实例 中 的 【 秒 数 】， 例 如 30。 
log (current .getUTCMilliseconds()) ; 
依据 协调 世界 时 ， 显 示 出 变量 current 的 Date 对 象 实例 中 的 【毫秒 数 】， 例 如 883。 


人 
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log (current .getTimezoneOffset ()) ; 


current.getTimezoneOffset(0) 会 先 以 分 钟 数 作为 测量 单位 ， 再 返回 其 本 地 〈 中 国 ) 时间 相对 于 协 
调 世 界 时 的 时 间 差 -480。 


10.2.2 ”设置 时 间 相 关 数 据 


通过 【内 含 Date 对 象 实例 的 变量 名 称 】: 

衔接 【.setHours()】 可 设置 特定 日 期 中 ， 代 表 小 时 数 的 整数 值 。 

衔接 【.setMinutes0】 可 设置 特定 日 期 中 ， 代 表 分 钟 数 的 整数 值 。 

衔接 【.setSeconds()】〗， 可 设置 特定 日 期 中 ， 代 表 秒 数 的 整数 值 。 

衔接 【.setMilliseconds()〗» 可 设置 特定 日 期 中 ， 代 表 毫 秒 数 的 整数 值 。 

衔接 【.setTime()】〗， 可 设置 从 纪元 时 间 (epoch time )， 也 就 是 公元 1970 年 1 月 1 日 0 时 0 分 
0 秒 开 始 ， 至 特定 时 间 点 为 止 的 毫秒 数 。 


此 外 ,通过 函数 【内 含 Date 对 象 实例 的 变量 名 称 】 衔 接 【.setUTCHours0)】【.setUTCMinutesO】、 
【.setUTCSeconds0 】 和 【.setUTCMillisecondsO0 】， 可 分 别 设 置 【 协 调 世 界 时 (UTC，coordinated 
universal time)】 的 特定 时 间 点 的 相关 整数 值 。 请 参看 如 下 示例 。 

【10-2-2-time-settings.js】 

let special = new Date('2025/6/6 11:50:00') ; 


console.log(special) ; 
console.1log('') ; 


special.setHours(19) ; 
special.setMinutes (45) ; 
special.setSeconds (30) ; 
special.setMilliseconds(777) ; 


console.1log (special) ; 
console.log (special .getTime()) ; 
console.10g('') ; 


special.setUTCHours (19) ; 
special.setUTCMinutes (45) ; 
special.setUTCSeconds (30) ; 
special.setUTCMilliseconds(777) ; 


console.log(special) ; 
console.log (special.getTime ()) ; 


【相关 说 明 】 

let special = new Date('2025/6/6 11:50:00') ; 

此 语句 声明 了 变量 special， 其 初始 数据 为 【内 含 日 期 与 时 间 2025/6/6 11:50:00 (星期 五 )】 的 
Date 对 象 实例 。 
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console.log (special) ; 

显示 出 类 似 【Fri Jun 06 2025 11:50:00 GMT+0800 (China Standard Time)】 的 信息 。 
console.10g('') ; 
special.setHours (19) ; 
重新 设置 变量 special 的 Date 对 象 实例 中 的 【小 时 数 】 为 19。 
pecial. setMinutes (45) ; 
EE 新 设置 变量 special 的 Date 对 象 实例 中 的 【分 钟 数 】 为 45。 
special.setSeconds (30) ; 
新 设置 变量 special 的 Date 对 象 实例 中 的 【 秒 数 】 为 30。 


special.setMilliseconds(777) ; 


s 


洲 
将 
宣 


重新 设置 变量 special 的 Date 鸡 1 的 【毫秒 数 】 为 777。 

console.log(special) ; 

显示 出 类 似 【Fri Jun 06 2025 19:45:30 GMT+0800 (China Standard Time)】 的 信息 。 

console.log (special.getTime ()) ; 

special.getTime() 返 回 【 从 1970/1/1 00:00:00:000 (0 时 0 分 0 秒 0 毫 秒 ) 开始 ， 到 变量 special 
的 Date 对 象 实例 中 的 本 地 特定 时 间 点 为 止 】 的 毫秒 数 1749210330777。 

console.1log('') ; 

special.setUTCHours (19) ; 

依据 协调 世界 时 (UTC, coordinated universal time ) ， 重 新 设置 变量 special 的 Date 对 象 实例 中 
的 【小 时 数 】 为 19。 

special.setUTCMinutes (45) ; 

依据 协调 世界 时 ， 重 新 设置 变量 special 的 Date 对 象 实例 中 的 【分 钟 数 】 为 45。 

special.setUTCSeconds (30) ; 

依据 协调 世界 时 ， 重 新 设置 变量 special 的 Date 对 象 实例 中 的 【 秒 数 】 为 30。 

special.setUTCMilliseconds(777) ; 


依据 协调 世界 时 ， 重 新 设置 变量 special 的 Date 对 象 实例 中 的 【毫秒 数 】 为 777。 


console.log (special) ; 


显示 出 类 似 【Sat Jun 07 2025 03:45:30 GMT+0800 (China Standard Time)】 的 信息 。 
console.log (special .getTime()) ; 


special.getTime() 返 回 【从 1970/1/1 00:00:00:000 (0 时 0 分 0 秒 0 毫秒 ) 开始 ， 到 变量 special 
的 Date 对 象 实例 中 的 本 地 特定 时 间 点 为 止 】 的 毫秒 数 1749239130777。 
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10.2.3 ” 带 有 时 间 的 格式 化 字符 串 


通过 【内 含 Date 对 象 实例 的 变量 名 称 】 衔 接 【.toLocaleTimeString0】、【.toLocaleString0】、 
【toTimeString0】、【 .toISOString0】 和 【.toString0】， 可 返回 不 同 格式 的 时 间 字 符 串 。 请 参看 
如 下 示例 。 


【10-2-3-time-formatting-strings.js】 


let special = new Date('2100/8/8 10:30:00') ; 


with (console) 
{ 
log(special) ; 
log('') ; 


1og (special.toLocaleTimeString()) ; 
1og (special.toLocaleString()) ; 
log (special.toTimeString()) ; 
1og (special .toISOString()) ; 
log (special.toString()) ; 
} 


【相关 说 明 】 

let special = new Date('2100/8/8 10:30:00') ; 

此 语句 声明 了 变量 special， 其 初始 数据 为 【内 含 日 期 与 时 间 2100/8/8 10:30:00 (星期 日 )】 的 
Date 对 象 实例 。 


with (console) 


{ 
log(special) ; 


显示 出 类 似 【Sun Aug 08 2100 10:30:00 GMT+0800 (China Standard Time)】 的 信息 。 
log (special .toLocaleTimeString()) ; 

显示 出 类 似 【上 午 10:30:00】 的 简略 本 地 时 间 。 
1og (special.toLocaleString()) ; 

显示 出 类 似 【2100/8/8 上 午 10:30:00】 的 本 地 日 期 与 时 间 。 


log (special.toTimeString()) ; 


显示 出 类 似 【10:30:00 GMT+0800 (China Standard Time)】 的 本 地 时 间 。 
log (special .toISOString()) ; 
special.toISOString() 会 先 将 本 地 的 日 期 与 时 间 , 转 换 成 为 协调 世界 时 的 日 期 与 时 间 , 再 依据 ISO 
8601 格式 ， 显 示 出 类 似 【2100-08-08T02:30:00.000Z】 的 信息。 
log (special.toString()) ; 


显示 出 类 似 【Sun Aug 08 2100 10:30:00 GMT+0800 (China Standard Time)】 的 本 地 日 期 与 时 间 。 
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10.2.4 ”处 理 纪元 时 间 至 今 的 毫秒 数 (ES6) 


纪元 时 间 (epoch time) 是 指 公元 1970 年 1 月 1 日 0 时 0 分 0 秒 的 时 间 点 .通过 函数 [ Date.now()】 
或 【Date.parse( 内 含 当 前 时 间 点 的 Date 对 象 实例 的 变量 名 称 )】， 可 返回 纪元 时 间 到 当前 时 间 点 的 
毫秒 数 。 请 参看 如 下 两 个 示例 。 

【10-2-4-e1-Date-now-and-parse.js】 


let today = new Date() ; 
let count = today.getTime () ; 


console.log(count) ; 

console.log(Date.now()) ; 

console.1log (Date.parse (today)) ; 

console.1og (Date.parse('2023/01/01 18:30:00')) ; 
console.10g('') ; 


console.log (typeof count) ; 
console.log (typeof Date.now()) ; 
console.log (typeof Date.parse(today)) ; 


【相关 说 明 】 

let today = new Date() ; 
此 语句 声明 了 变量 today， 其 初始 数据 为 内 含 当前 日 期 与 时 间 的 Date 对 象 实例 。 
let count = today.getTime() ; 


today.getTime() 会 返回 【从 1970/1/1 00:00:00:000 (0 时 0 分 0 秒 0 毫 秒 ) 开始 ， 到 变量 today 
的 Date 对 象 实例 中 的 本 地 特定 时 间 点 为 止 】 的 毫秒 数 ， 例 如 1543473928708。 


console.log(count) ; 


console.log(Date.now()) ; 


Date.now() 会 返回 【从 1970/1/1 00:00:00:000 开始 ， 到 执行 此 语句 的 当前 时 间 点 为 止 】 的 毫秒 
数 ， 例 如 1543473928709。 


console.1log (Date.parse (today)) ; 


Date.parse(today) 会 返回 【从 1970/1/1 00:00:00:000 开始 ， 到 执行 此 语句 的 当前 时 间 点 为 止 】 
较 不 精确 的 毫秒 数 ， 例 如 1543473928000。 


console.1log (Date.parse('2023/01/01 18:30:00')) ; 


Date.parse('2023/01/01 18:30:00) 会 返回 【从 1970/1/1 00:00:00:000 开始 ， 到 2023/01/01 
18:30:00:000 为 止 】 的 毫秒 数 ， 例 如 1672569000000。 


console.1og('') ; 


console.log (typeof count) ; 
console.log (typeof Date.now()) ; 
console.log (typeof Date.parse(today)) ; 
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变量 count、Date.now() 与 Date.parse(today) 的 返回 数据 ， 均 是 数值 Cnumber) 类 型 的 ， 所 以 这 
3 个 语句 均 显 示 出 'number 的 信息 。 


【10-2-4-e2-date-UTC-and-valueOf.js】 


let ms count = Date.UTC(2100, 10, 1, 19, 45, 30) ; 
let special = new Date (ms count) ; 


with (console) 

{ 
log (Date .now()) ; 
log(''); 


log(ms count) ; 

log (special.getTime()) ; 
log (special.valueOf()) ; 
log (Date.parse (special)) ; 
log(''); 


log (typeof ms count) ; 

log (typeof special.getTime()) ; 

log (typeof special.valueOf ()) ; 

1og (typeof Date.parse (Special)) ; 
} 


【相关 说 明 】 

let ms_count = Date.UTC(2100, 10, 1, 19, 45, 30) ; 

此 语句 声明 了 变量 ms_count， 其 初始 数据 为 【从 1970/1/1 00:00:00:000 开始 ， 到 协调 世界 时 的 
日 期 与 时 间 2100/11/1 19:45:30 (星期 一 ) 为 止 】 的 毫秒 数 4128781530000。 请 留意 ， 月 份 的 数值 10 
代表 11 月。 


let Special = new Date (ms_count) ; 


此 语句 声明 了 变量 special， 其 初始 数据 为 【内 含 协 调 世 界 时 的 日 期 与 时 间 2100/11/1 19:45:30 
(星期 一 ) ， 被 转换 成 为 本 地 〈 中 国 ) 日 期 与 时 间 2100/11/2 03:45:30〈 星 期 二 ) 】 之 后 的 Date 对 
象 实例 。 


with (console) 
{ 


log (Date.now()) ; 


Date.now() 会 返回 【从 1970/1/1 00:00:00:000 开始 ， 到 执行 此 语句 的 当前 时 间 点 为 止 】 的 毫秒 
数 ， 例 如 1543474327408。 


log('') ; 


1og (ms_count) ; 


显示 出 毫秒 数 4128781530000 的 信息 。 


1og (special.getTime()) ; 
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log (special .valueOf()) ; 
log (Date.parse (special)) ; 


这 3 个 语句 均 显示 出 【从 1970/1/1 00:00:00:000 开始 ， 到 变量 special 的 Date 对 象 实例 中 的 本 
地 特定 时 间 点 为 止 】 的 毫秒 数 4128781530000。 


log(''); 


log (typeof ms count) ; 

log (typeof special.getTime()) ; 
log (typeof special.valueOof ()) ; 
log (typeof Date.parse (Special)) ; 


变量 ms_count、special.getTime()、special.valueOf() 与 Date.parse(special) 的 返回 数据 ， 均 是 数 
值 mumber) 类 型 的 ， 所 以 这 4 个 语句 均 显示 出 "number 的 信息 。 


10.3 练 习 题 


1. 试 编写 JavaScript 源 代 码 ， 以 计算 出 从 出 生 的 那 时 刻 起 ， 至 当前 为 止 ， 您 生活 在 地 球 上 的 
天 数 。 
2. 试 编写 JavaScript 源 代码 ， 以 显示 出 当前 时 间 点 的 100 天 之 后 的 日 期 和 时 间 。 


第 11 章 
DOM 的 事件 处 理 (一 ) 


文档 对 象 模型 (document object model，DOM) 可 将 特定 网 页 的 内 容 ， 改 以 树 状 结构 ， 来 表示 
其 内 容 里 各 节点 的 片段 ,编程 人 员 可 进一步 通过 JavaScript 引擎 支持 的 对 象 实例 的 相关 属性 和 函数 ， 
在 特定 网 页 里 ,访问 特定 节点 的 片段 ， 并 可 在 特定 事件 (event) 发 生 时 ， 通 过 事先 编写 的 源 代码 ， 
和 用 户 进行 互动 。 本 章 内 容 主要 介绍 鼠标 事件 、 键 盘 事 件 与 表单 事件 的 处 理 的 说 明 。 


11.1 鼠标 事件 


鼠标 事件 (mouse event) 是 指 在 特定 网 页 里 ， 用 户 借助 指针 设备 ， 进 行 互动 时 所 发 生 的 事件 。 


11.1.1 单 击 和 双击 事件 


在 特定 网 页 里 ， 用 户 按 下 鼠标 左 键 时 ， 会 发 生 单 击 〈click) 事件 ， 用 户 快速 按 下 鼠标 的 左 键 2 
次 时 ， 则 会 发 生 双击 (double click) 事件 。 请 参看 如 下 示例 。 

【11-1-1-mouse-onclick-and-ondblclick.js】 

let element = null ; 

for (let = 1 1 < 1 tt》 


{ 
element = document .createElement ('button') ; 


element.id = 'btn0' + i， 
element.innerHTML = "TEST 0' + i; 


element.style.margin = '5px' ; 
element .style.fontSize = '20px' ; 
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【相关 说 明 】 


声明 初始 数据 为 null( 空 值 ) 的 变量 element。 


这 个 for 循环 语句 会 迭代 6 次 。 


此 语句 将 变量 element 的 数据 ， 设 置 为 网 页 里 代表 按钮 的 button 元 素 实 例 。 


此 语句 设置 了 新 button 元 素 实例 的 属性 id 的 数据 ,成 为 字符 串 'btn01'~'btn06' 的 其 中 之 一 ， 进 
而 变 成 特定 button 元 素 实例 的 身份 识别 码 。 


此 语句 设置 了 新 button 元 素 实例 的 属性 innerHTML 的 数据 ,成 为 字符 串 'TEST 01' ~'TEST 06'， 
进而 变 成 特定 按钮 上 的 文本 。 
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element .style.margin = '5px' ; 

语句 设置 了 新 button 元 素 实例 的 属性 margin 的 数据 ， 成 为 '5px'， 使 得 每 个 按钮 的 边框 之 外 
的 间隔 距离 ， 成 为 5 像素 ， 进 而 让 按钮 之 间 的 距离 ， 变 成 5+5= 10 像素 。 

element.style.fontSize = '20pPx' ; 
语句 设置 了 新 button 元 素 实例 的 属性 fontSize 的 数据 ， 成 为 20px'， 使 得 每 个 按钮 上 单一 文 
字 的 尺寸 ， 变 成 20 像素 。 
element.style.borderRadius = '5px' ; 

此 语句 设置 了 新 button 元 素 实 例 的 属性 borderRadius 的 数据 ,成 为 '5px', 使 得 每 个 按钮 的 边框 ， 
变 成 半径 为 5 像素 的 圆 角 边框 。 
element.style.backgroundColor = 'LightBlue' ; 

此 语句 设置 了 新 button 元 素 实例 的 属性 backgroundColor 的 数据 ， 成 为 LightBlue'， 使 得 每 个 
按钮 的 背景 颜色 ， 变 成 浅 蓝 色 。 
element.style.color = 'Green' ; 
此 语句 设置 了 新 button 元 素 实例 的 属性 color， 成 为 'Green'， 使 得 每 个 按钮 上 的 文本 颜色 ， 变 
成 绿色 。 
document .body.appendChild (element) ; 

此 语句 在 网 页 里 的 body 元 素 实 例 内 ， 新 增 变量 element 所 代表 的 新 button 元 素 实例 。 
} 


btn01.onclick = function (event) 
{ 
console.1og(`Button ${event.target.id} was clicked。) ; 

3 

此 语法 在 属性 id 的 数据 为 'btn01' 的 按钮 元 素 实例 中 ， 设 置 其 属性 onclick 的 数据 ， 成 为 【显示 
特定 按钮 被 用 户 单 击 之 后 的 信息 】 的 匿名 函数 的 定义 。 在 这 个 匿名 函数 所 显示 的 信息 里 , 包含 特定 
按钮 的 属性 id 的 数据 字符 串 ， 例 如 【'btn01'"、'btn02'、...、'btn06"】， 使 得 属性 id 的 数据 为 'btn01' 
的 按钮 元 素 实例 ， 被 监听 着 单 击 〈click) 动作 。 一 旦 此 按钮 元 素 实例 被 单 击 时 ， 上 述 匿名 函数 就 会 
被 调用 。 

function actions (event) 

{ 


console.1og(`Button ${event.target.id} was clicked.) ; 


水 

此 语法 定义 了 带 有 参数 event 的 函数 actions0， 并 且 和 上 述 的 匿名 函数 ， 具 有 相同 的 效果 。 

btn02.onclick = actions ; 

此 语句 在 属性 id 的 数据 为 'btn02' 的 按钮 元 素 实例 中 ,设置 其 属性 onclick 的 数据 ， 成 为 函数 名 
称 actions。 这 意味 着 属性 id 的 数据 为 'btn02' 的 按钮 元 素 实例 ， 被 监听 着 单 击 (click) 动作 。 一 旦 此 
按钮 元 素 实例 被 单 击 时 ， 函 数 actions() 就 会 被 调用 。 
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btn03.onclick = (event) => console.log(‘Button ${event.target.id} was clicked.*) ; 
此 语句 在 属性 id 的 数据 为 "btn03' 的 按钮 元 素 实例 中 ， 设 置 其 属性 onclick 的 数据 ， 成 为 箭头 函 
数 【(event) => console.log(CButton ${event.target.id} was clicked.`)】 的 定义 ， 使 得 属性 id 的 数据 为 
'btn03' 的 按钮 元 素 实例 ， 被 监听 着 单 击 (click) 动作 。 一 旦 此 按钮 元 素 实例 被 单 击 时 ， 上 述 箭头 函 
数 就 会 被 调用 。 
btn04.addEventListener('click', (event) => console.log(`Button ${event.target.id} was 
clicked.*)) ; 


此 语句 通过 调用 addEventListener0 函 数 , 使 得 属性 id 的 数据 为 btn04' 的 按钮 元 素 实例 , 被 监听 
着 单 击 动作 。 一旦 属性 id 的 数据 为 'btn04' 的 按钮 元 素 实例 被 单 击 时 , 【显示 特定 按钮 被 用 户 单 击 之 
后 的 信息 】 的 箭头 函数 【(event) => console.log(CButton ${event.target.id} was clicked.`)】 就 会 被 调用 。 


btn05.ondblclick = (event) => console.1log(`Button ${event.target.id} was doubly clicked.，) ; 

此 语句 在 属性 id 的 数据 为 'btn05' 的 按钮 元 素 实 例 中 ,设置 其 属性 ondblclick 的 数据 ， 成 为 箭头 
函数 【(event) => console.log( "Button ${event.target.id} was doubly clicked.…)】 的 定义 ， 使 得 属性 id 
的 数据 为 'btn05' 的 按钮 元 素 实例 ， 被 监听 着 双击 (double click) 动作 。 一 旦 此 按钮 元 素 实例 被 双击 
时 ， 上 述 箭头 函数 就 会 被 调用 。 


btn06.addEventListener('dblclick', (event) => console.log( “Button ${event.target.id} was 
doubly clicked.*)) ; 


此 语句 通过 调用 addEventListener0 函 数 , 使 得 属性 id 的 数据 为 'btn06' 的 按钮 元 素 实例 , 被 监听 
双击 (double click) 动作 。 一 旦 属性 id 的 数据 为 'btn06' 对 应 的 按钮 元 素 实例 被 双击 时 ，【 显示 特定 
按钮 被 用 户 双击 之 后 的 信息 】 的 箭头 函数 【(event) => console.log( Button $f{event.target.id} was 
doubly clicked.)】 就 会 被 调用 。 


11.1.2 上下文 菜单 事件 


在 特定 网 页 里 , 用 户 按 下 鼠标 右键 或 键盘 上 的 菜单 键 (menu key) 时 , 会 发 生 右 击 (right click) 
/ 上 下 文 菜单 (context menu) 事件 。 此 时 ， 在 默认 情况 下 ， 上 下 文 菜单 就 会 显示 在 特定 的 网 页 里 。 
请 参看 如 下 示例 。 

【11-1-2-mouse-oncontextmenu.js】 

let element = null ; 

function display message() 


{ 
event .preventDefault (); 


console.log('Document was right clicked.') ; 
} 


// document .oncontextmenu = display message ; 
document .addEventListener('contextmenu', display message) ; 
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【相关 说 明 】 
let element = null ; 
此 语句 声明 了 初始 数据 为 null ( 空 值 ) 的 变量 element。 


function display message() 
{ 


event .preventDefault (); 
此 语句 可 使 得 鼠标 右键 被 点 击 时 ， 不 会 出 现 默认 的 上 下 文 菜单 。 


console.log('Document was right clicked.') ; 
} 


此 语法 定义 了 显示 相关 信息 的 函数 display_message()。 


// document .oncontextmenu = display message ; 
document .addEventListener('contextmenu', display message) ; 


通过 调用 addEventListener() 函 数 ， 使 得 代表 特定 网 页 的 document 对 象 实例 ， 被 监听 启动 上 下 
文 菜 单 (context menu) 的 【鼠标 右键 被 点 击 】 动 作 。 一 旦 在 当前 网 页 中 ， 用 户 按 下 鼠标 右键 时 ， 
显示 相关 信息 的 函数 display_message() 就 会 被 调用 。 


11.1.3 ”鼠标 按 下 与 松 开 事件 
在 特定 网 页 里 ， 用 户 按 下 鼠标 左 键 的 瞬间 ， 会 发 生 鼠 标 按 下 (mouse down) 事件 ， 放 开 鼠 标 
左 键 的 瞬间 ， 会 发 生 鼠 标 松 开 mouse up) 事件 。 请 参看 如 下 示例 。 


【11-1-3-mouse-onmousedown-and-onmouseup.js】 
let element = null ; 

for (let i = 1; i < 5; i++) 

{ 


element = document .createElement ('div') ; 


element.id = 'div0' + i ? 
element.innerHTML = 'Block 0' + i; 


element.style.width = '150px' ; 


element.style.margin = '5px auto' ; 
element. style.textRAlign = 'center' ; 
element.style.fontSize = '20px' ; 

element.style.borderRadius = 'S5px" ; 


element. style.backgroundColor = 'LightBlue' ; 
element. style.color = 'Green' ; 


document .body.appendChild (element) ; 
} 


function action01(event) 
{ 
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【相关 说 明 】 


声明 初始 数据 为 null 〈 空 值 ) 的 变量 element。 


此 for 循环 语句 会 迭代 4 次 。 


此 语句 使 得 变量 element 的 数据 ， 成 为 网 页 里 的 新 的 div 元 素 实 例 。 


此 语句 设置 了 新 div 元 素 实例 的 属性 id 的 数据 ， 成 为 字符 串 'div01' ~ "div04 其 中 之 一 ， 进 而 变 
成 这 个 div 元 素 实例 的 身份 识别 码 。 


此 语句 设置 了 新 div 元 素 实例 的 属性 innerHTML 的 数据 ， 成 为 字符 串 'Block 01 ~ 'Block 04' 其 
中 之 一 ， 进 而 变 成 这 个 div 元 素 实例 上 的 文本 。 


这 7 个 语句 分 别 设置 了 新 div 元 素 实例 在 网 页 里 的 不 同 部 分 的 外 观 。 
aocument ,body.appendChild(elenent 1 
此 语句 在 网 页 body 元 素 实例 内 ， 新 增 了 变量 element 所 代表 的 新 div 元 素 实例 。 
[| 
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function action01(event) 
{ 


console.log(`Block ${event.target.id} was pressed) ; 

此 语句 显示 出 特定 div 元 素 实例 被 按 下 鼠标 左 键 的 信息 ， 并 带 有 特定 div 元 素 实例 的 属性 id 
的 数据 字符 串 'div01'"、'div02'、'div03' 或 'div04' 其 中 之 一 。 

} 

上 述 语法 定义 了 带 有 参数 event 的 函数 action010)。 

div01.onmousedown = action01 ; 

此 语句 在 属性 id 的 数据 为 'div01' 的 div 元 素 实例 中 ， 设 置 其 属性 onmousedown 的 数据 ， 成 为 
函数 名 称 action01, 使 得 属性 id 的 数据 为 'div01' 的 div 元 素 实 例 , 被 监听 着 被 按 下 鼠标 左 键 (mouse 
down / pressed) 的 动作 。 一 旦 在 此 div 元 素 实例 上 ， 被 按 下 鼠标 左 键 ， 函 数 action01() 就 会 被 调用 。 

div02.addEventListener('mousedown', action01) ; 

此 语句 通过 调用 addEventListener0) 函 数 ， 使 得 属性 id 的 数据 为 div02' 的 div 元 素 实 例 ， 被 监听 
着 被 按 下 鼠标 左 键 (mouse down/ pressed) 的 动作 。 一 旦 在 属性 id 的 数据 为 div02' 的 div 元 素 实 例 

上 ， 被 按 下 鼠标 左 键 时 ， 函 数 actions010 就 会 被 调用 。 


function action02(event) 
{ 


console.1log(`Block ${event.target.id} was released。) ; 
此 语句 显示 出 在 特定 div 元 素 实例 上 , 释放 (released) 鼠标 左 键 的 信息 ， 并 带 有 特定 div 元 素 
实例 的 属性 id 的 数据 字符 串 'div01'、'div02'、'div03' 或 'div04 其 中 之 一 。 
} 


div03.onmouseup = action02 ; 

此 语句 在 属性 id 的 数据 为 div03' 的 div 元 素 实例 中 , 设置 其 属性 onmouseup 的 数据 , 成 为 函数 
名 称 action02， 使 得 属性 id 的 数据 为 'div03' 的 div 元 素 实 例 ， 被 监听 着 被 释放 鼠标 左 键 (mouse up / 
released) 的 动作 。 一 旦 在 此 div 元 素 实 例 上 ， 被 释放 鼠标 左 键 时 ， 函 数 action02() 就 会 被 调用 。 


div04.addEventListener('mouseup', action02) ; 


此 语句 通过 调用 addEventListener(0) 函 数 ， 使 得 属性 id 的 数据 为 'div04' 的 div 元 素 实例 ， 被 监听 
着 被 释放 鼠标 左 键 (mouse up / released) 的 动作 。 一 旦 在 属性 id 的 数据 为 'div04' 的 div 元 素 实 例 上 ， 
被 释放 鼠标 左 键 时 ， 函 数 actions02() 就 会 被 调用 。 


11.1.4 ”鼠标 指针 相关 进出 事件 


在 特定 网 页 里 ， 鼠 标 指针 被 移入 特定 元 素 实例 的 范围 时 , 会 发 生 鼠 标 进 入 (mouse enter) 事件 
和 鼠标 悬 停 (mouse over) 事件 ; 鼠标 指针 被 移出 特定 元 素 实例 的 范围 时 , 则 会 发 生 鼠 标 离开 (mouse 
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leave) 事件 和 鼠标 脱出 (mouse out) 事件 。 

鼠标 进入 事件 和 鼠标 悬 停 事件 的 差异 ， 在 于 鼠标 进入 事件 仅 会 作用 于 当前 元 素 实例 【本 身 】， 
而 不 包括 其 子 元 素 实 例 ， 鼠 标 悬 停 事 件 则 会 作用 于 当前 元 素 实例 ， 以 及 其 所 有 的 子 元 素 实 例 ! 关于 
鼠标 指针 相关 进出 事件 的 运用 ， 可 参看 如 下 示例 。 


【11-1-4-mouse-cursor-in-and-outjs】 


【相关 说 明 】 
et 
声明 了 初始 数据 为 null ( 空 值 ) 的 变量 element。 
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element = document .createElement('div') ; 
此 语句 让 变量 element 的 数据 ， 成 为 网 页 里 的 新 的 div 元 素 实例 。 


element .id = "outer' ; 


设置 新 div 元 素 实例 的 属性 id 的 数据 ， 成 为 字符 串 'outer ， 进 而 变 成 这 个 div 元 素 实例 的 身份 


识别 码 。 


element .innerHTML = "Outer' ; 


此 语句 设置 了 新 div 元 素 实例 的 属性 innerHTML 的 数据 ， 成 为 字符 串 'Outer， 进 而 变 成 这 个 


div 元 素 实例 上 的 文本 。 


element .style.width = "150px' ; 

element .style.height "100pPx' 7 

element .style .margin "5px auto' ; 
element . style.fontSize = 'lem' ; 

element .style.borderRadius = '5px' ; 

element . style.backgroundColor = "LightBlue' ; 
element .style.color = 'Green' ; 


这 些 语 句 分 别 设置 了 新 div 元 素 实例 在 网 页 里 的 不 同 部 分 的 特定 外 观 。 


document .body.appendCchild(element) ; 


和 


element = document.createElement('div') ; 


Eo 


element .id = "inner' ; 


例 的 身份 识别 码 。 


element .innerHTML = "Inner' ; 


i 


元 素 实例 上 的 文本 。 
element .style.width = '100px' ; 
element.style.height = '50px' ; 
element . style .margin = 'S5px auto' ; 
element .style.textAlign = 'center' ; 
element.style.fontSize = "lem' ; 
element . style.borderRadius = 'S5px' ; 
element.style.backgroundColor = 'Teal' ; 
element .style.color = 'GreenYellow' ; 


这 些 语句 分 别 设置 了 新 div 元 素 实例 在 网 页 里 的 不 同 部 分 的 特定 外 观 。 


outer .appendChild(element) ; 


语句 在 网 页 里 的 body 元 素 实例 内 ， 新 增 变量 element 所 代表 的 新 div 元 素 实例 。 


语句 设置 了 变量 element 的 数据 ， 成 为 在 网 页 里 的 另 一 个 新 的 div 元 素 实例 。 


此 语句 设置 了 新 div 元 素 实例 的 属性 id 的 数据 ， 成 为 字符 串 'inner， 进 而 变 成 这 个 div 元 素 实 


语句 设置 了 新 div 元 素 实例 的 属性 innerHTML 的 数据 , 成 为 字符 串 'Inner', 进而 变 成 这 个 div 


此 语句 在 其 属性 id 的 数据 为 'outer 的 元 素 实 例 内 ， 新 增 了 变量 element 所 代表 的 新 div 元 素 实 


例 。 
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function action01(event) 
{ 
console.1og(`Block ${event.target.id} was left.*) ; 
此 语句 显示 出 特定 div 元 素 实 例 被 移出 (left) 鼠标 指针 的 信息 ， 并 带 有 此 div 元 素 实例 的 属性 


id 的 数据 字符 串 'outer 或 ' 
} 
上 述 语法 定义 了 带 有 参数 event 的 函数 action010。 


// outer .onmouseenter = action01 ; 
// outer.onmouseover = action01 ; 
// outer.onmouseleave = action01 ; 
outer.onmouseout = action01 ; 


inner' 其 中 之 一 。 


此 语句 在 属性 id 的 数据 为 'outer 的 div 元 素 实 例 中 , 设置 其 属性 onmouseout 的 数据 ,成 为 函数 
名 称 action01， 使 得 属性 id 的 数据 为 'outer' 的 div 元 素 实 例 ， 被 监听 着 移出 鼠标 指针 (mouse out) 


的 动作 。 一 旦 在 这 个 div 元 素 实例 上 ， 被 移出 鼠标 指针 时 ， 函 数 action01() 就 会 被 调用 。 


11.1.5 ”鼠标 移动 事件 


在 特定 网 页 里 ， 和 鼠标 指针 有 任何 被 移动 的 动作 时 ， 都 会 发 生 鼠 标 移动 mouse move) 事件 。 


请 参看 如 下 示例 。 
【11-1-5-mouse-onmousemove.js】 


let element = null ; 
element = document.createElement('div') ; 


element .id = 'div01' ; 
element .innerHTML = "Block 01' ; 


element .style.width = '150px' ; 
element . style.height = '100px' ; 

element .style .margin = 'S5px auto' ; 

element .style.fontSize = "lem' ; 
element . style.borderRadius = '5px' ; 

element .style.backgroundColor = "LightBlue' ; 
element .style.color = "Green' ; 


document .body .appendChild(element) ; 
function action01(event) 
{ 
console.1og (`Mouse moves on block $fevent.target.idlj.，) : 


} 


div01.onmousemove = action01 ; 
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【相关 说 明 】 

let element = null ; 

声明 初始 数据 为 null ( 空 值 ) 的 变量 element。 

element = document .createElement('div') ; 

此 语句 设置 了 变量 element 的 数据 ， 成 为 网 页 里 的 新 的 div 元 素 实例 。 

element .id = "div01' ; 

此 语句 设置 了 新 div 元 素 实例 的 属性 id 的 数据 ， 成 为 字符 串 'div01'， 进 而 变 成 这 个 div 元 素 实 
例 的 身份 识别 码 。 

element .innerHTML = "Block 01' ; 

此 语句 设置 了 新 div 元 素 实例 的 属性 innerHTML 的 数据 ， 成 为 字符 串 'Block 01'， 进 而 变 成 新 
div 元 素 实例 上 的 文本 。 

element .style.width = '150px' ; 

element .style.height = "100px' ; 

element .style.margin = "5px auto' ; 

element . style.fontSize = 'lem' ; 

element . style.borderRadius = 'S5px' ; 


element . style.backgroundColor = 'LightBlue' ; 
element .style.color = 'Green' ; 


这 些 语 句 分 别 设置 了 新 div 元 素 实例 在 网 页 里 的 不 同 部 分 的 特定 外 观 。 
document .body .appendChild (element) ; 
此 语句 在 网 页 里 的 body 元 素 实例 内 ， 新 增 了 变量 element 所 代表 的 新 div 元 素 实例 。 


function action01(event) 
{ 


console.1og(` Mouse moves on block $fevent.target.idj.，) ; 

此 语句 显示 出 特定 div 元 素 实例 被 移动 (move) 鼠标 的 信息 ， 并 带 有 这 个 div 元 素 实例 的 属性 
id 的 数据 字符 串 'div01'。 

} 

上 述 语法 定义 了 带 有 参数 event 的 函数 action010。 

div01.onmousemove = action01 ; 

此 语句 在 属性 id 的 数据 为 'div01' 的 div 元 素 实例 中 ， 设 置 其 属性 onmousemove 的 数据 ， 成 为 
函数 名 称 action01, 使 得 属性 id 的 数据 为 'div01' 的 div 元 素 实例 ,被 监听 着 被 移动 鼠标 (mouse move) 
的 动作 。 一 旦 在 这 个 div 元 素 实例 上 ， 被 移动 鼠标 时 ， 函 数 action010 就 会 被 调用 。 
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11.2 键盘 事件 


键盘 事件 (keyboard event) 是 指 窗口 (window) 的 焦点 (focus) 进入 特定 网 页 之 后 ， 用 户 按 
下 或 松 开 键盘 〈keyboard) 上 的 任意 按键 (key) 时 ， 所 发 生 的 事件 。 


11.2.1 ”按压 与 按 下 按键 事件 


窗口 (window) 的 焦点 (focus) 进入 特定 网 页 之 后 ， 用 户 按 下 特定 按键 (key) 时 ， 会 发 生 按 
压 按 键 〈key pressed) 事件 和 按 下 按键 (key down) 事件 。 

按压 按键 事件 和 按 下 按键 事件 的 差异 ， 在 于 按压 按键 事件 仅 来 自 于 键盘 上 的 字母 键 、 数 字 键 
与 符号 键 的 动作 ; 按 下 按键 事件 则 来 自 于 几乎 键盘 上 的 所 有 按键 .关于 按压 与 按 下 按键 事件 的 运用 ， 
可 参看 如 下 示例 。 

【11-2-1-keyboard-onkeypress-and-onkeydown.js】 


function action01(event) 
{ 

console.log('Any key is pushed.') ; 
} 


document .onkeypress = action01l ; 
// document .onkeydown = action01 ; 


【相关 说 明 】 


function action0]1 (event) 
{ 

console.log('Any key is pushed.') ; 
} 


此 语法 定义 了 【可 显示 出 按键 被 按 下 之 后 的 信息 】 的 函数 action01()。 
document .onkeypress = action01 ; 
此 语句 在 代表 特定 网 页 的 document 对 象 实例 中 ， 设 置 了 属性 onkeypress 的 数据 ， 成 为 函数 名 
称 action01。 一 旦 在 特定 网 页 里 ， 键 盘 上 的 字母 键 、 数 字 键 、 符 号 键 被 按 下 (key pressed) 时 ， 函 
数 action01() 就 会 被 调用 。 然 而 ， 此 语句 并 不 支持 上 述 按键 【以 外 】 的 其 他 按键 ， 被 按 下 的 动作 。 
// document .onkeydown = action01 ; 


车 改 用 属性 【onkeydown】， 则 几乎 在 键盘 上 的 所 有 按键 ， 被 按 下 的 动作 ， 都 可 被 监听 到 。 


11.2.2 ” 松 开 按键 事件 


窗口 (window) 的 焦点 (focus) 进入 特定 网 页 之 后 ， 用 户 松 开 特 定 按键 (key) 时， 会 发 生 松 
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开 按 键 (key up) 事件 。 请 参看 如 下 示例 。 
【11-2-2-keyboard-onkeyup.js】 
function action01(event) 
{ 


console.1log('Any key is released.') ; 
} 


document .onkeyup = action01 ; 


【相关 说 明 】 


function action01 (event) 
{ 

console.1og('Rny key is released.') ; 
} 


此 语法 定义 了 【可 显示 出 按键 被 松 开 之 后 的 信息 】 的 函数 action01()。 

document .onkeyup = action01 ; 

此 语句 在 代表 特定 网 页 的 document 对 象 实例 中 ， 设 置 了 其 属性 onkeyup 的 数据 ， 成 为 函数 名 
称 action01。 一 旦 在 特定 网 页 里 ,键盘 上 的 特定 按键 被 释放 (key up) 时， 函数 action010 就 会 被 调 
用 。 


11.3 ”网 页 内 容 的 装 全 事件 


特定 网 页 的 内 容 ， 因 为 被 加 载 、 印 载 、 隐 藏 、 跳 动 或 滚动 时 ， 均 会 发 生 装 卸 (load or unload) 
相关 的 事件 。 


11.3.1 ”出现 错误 事件 
在 特定 网 页 里 ， 若 代表 图 像 (image) 的 img 元 素 实例 ,或 内 含 JavaScript 源 代码 的 script 元 素 
实例 ， 出 现 加 载 或 执行 上 的 问题 时 ， 则 会 发 生出 现 错误 (error) 事件 。 请 参看 如 下 示例 。 


【11-3-1-onerrorjs】 


let element = document.createElement ('img') ; 
element .src = 'http://waw.xxx.cn/one image.png' ; 


element .style.display = 'block' ; 
element . style.marginTop = 'lem' ; 


document .body .appendCchild(element) ; 


function display message01 (event) 
{ 
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【相关 说 明 】 
~ letelenent = document.createElenent('ing) 1 
此 语句 声明 了 初始 数据 为 【代表 图 像 的 img 元 素 实 例 】 的 变量 element。 


此 语句 将 特定 图 像 所 在 网 址 的 字符 串 'http:/www.xxx.cn/one_image.png'， 赋 给 变量 element 的 
img 元 素 实例 中 的 属性 src。 换 言 之 ， 当 img 元 素 实例 被 新 增 于 特定 网 页 里 时 ， 浏 览 器 就 会 尝试 显 
示 出 其 网 址 对 应 的 图 像 。 


这 两 个 语句 分 别 设置 了 变量 element 的 img 元 素 实例 的 特定 外 观 。 


此 语句 在 body 元 素 实例 中 ， 新 增 了 变量 element 所 代表 的 img 元 素 实例 ， 进 而 使 得 img 元 素 
实例 所 代表 的 图 像 ， 正 式 显示 于 网 页 里 。 


此 语法 定义 了 带 有 参数 event 的 函数 display_ message010)。 


此 语法 定义 了 带 有 参数 event 的 函数 display_message02()。 
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} 
此 语法 定义 了 函数 expired0 。 


element .onerror = display message01 ; 


此 语句 在 变量 element 所 代表 的 img 元 素 实例 中 ， 设 置 其 属性 onerror 的 数据 ， 成 为 函数 名 称 
display_message01， 使 得 当 浏 览 器 开启 网 页 时 ， 若 这 个 img 元 素 实例 所 代表 的 图 像 ， 无 法 成 功 被 加 
载 时 ， 函 数 display_message010) 就 会 被 调用 ， 进 而 显示 出 【The file is not found.…】 的 信息 。 

在 显示 出 上 述 信 息 之 前 ， 浏 览 器 会 先行 主动 显示 出 默认 的 错误 信息 【 GET 
http://www.xxx.cn/one_ image.png net::ERR_NAME NOT RESOLVED) 。 


window.onerror = display message02 ; 


此 语句 在 当前 浏览 器 窗口 (browser window) 所 代表 的 window 对 象 实例 中 , 设置 其 属性 onerror 
的 数据 ， 成 为 函数 名 称 display_message02， 使 得 浏览 器 执行 特定 网 页 里 的 se 源 代码 时 ， 若 
发 生 任何 错误 ， 则 函数 display_message02() 会 被 调用 ， 进 而 显示 出 【An exception is thrown..….】 的 信 
息 。 在 显示 上 述 信息 之 后 ， 浏 览 器 会 先行 主动 显示 出 默认 的 错误 信息 ， 例 如 【Uncaught Error: Time 


is out... at expired】。 


setTimeout (expired，2000) ; 


此 语句 使 得 在 2000 毫秒 (2 秒 ) 之 后 ， 名 称 为 expired 的 函数 会 被 调用 。 


11.3.2 ”加 载 和 页 面 显 示 事件 


特定 网 页 被 加 载 完 成 时 ， 会 发 生 加 载 (load) 事件 ， 若 特定 网 页 正式 被 显示 于 浏览 器 窗口 中 ， 
则 会 发 生 页 面 显示 (page show) 事件 。 请 参看 如 下 示例 。 


【11-3-2-onload-and-onpageshow.html】 


<!DOCTYPE html> 
<html> 
<head> 
<title> 整 体 页 面 的 pageshow 与 load 事件 </title> 
</head> 
<body> 
</body> 
<script> 
// document.body.onload = () => console.log('This page has been loaded.') ; 
window.onload = () => console.log('This page has been loaded.') ; 


// document .body.onpageshow = () => console.1log('This page shows up after being loaded.') ; 
window.onpageshow = () => console.log('This page shows up after being loaded.') ; 


MAh 
function display() 
{ 
console.log('An image is loaded.') ; 
} 


let element = document .createElement ('img') ; 
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element .src = 'images/thumbnail01.jpg' ; 


element .style.display = 'block' ; 
element .style .marginTop = '10px' ; 


document .body.appendCchild (element) ; 
element .onload = display ; 


</script> 
</html> 


【相关 说 明 】 


<script> 


// document.body.onload = () => console.log('This page has been loaded.') ; 
window.onload = () => console.log('This page has been loaded.') ; 


此 语句 在 等 号 右 侧 ,定义 了 用 来 显示 信息 【This page has been loaded.】 的 箭头 函数 ， 并 赋 给 了 
window 对 象 实例 中 的 属性 onload， 使 得 此 网 页 文档 ， 被 浏览 器 加 载 完成 时 ， 上 述 箭头 函数 就 会 被 
调用 。 


// document .body.onpageshow = () => console.log('This page shows up after being loaded.'); 
window.onpageshow = () => console.log('This page shows up after being loaded.') ; 


此 语句 将 另 一 箭头 函数 的 定义 ， 赋 给 window 对 象 实例 中 的 属性 onpageshow， 使 得 此 网 页 文 
档 ， 被 浏览 器 显示 完成 时 ， 上 述 箭头 函数 就 会 被 调用 。 
function display() 
{ 


console.log('An image is loaded.') ; 
} 


此 语法 定义 了 函数 display()， 并 用 来 显示 【An image is loaded.】 的 信息 。 


let element = document.createElement ('img') ; 
此 语法 声明 了 变量 element， 其 初始 数据 为 代表 图 像 的 img 元 素 实例 。 
element .src = 'images/thunbnail01.jpg' ; 
此 语句 将 代表 图 像 文 档 路 径 的 字符 串 'images/thumbnail01.jpg', 赋 给 变量 element 的 img 元 素 实 
例 中 的 属性 src， 进 而 使 得 这 个 图 像 ， 被 显示 于 img 元 素 实例 的 范围 内 。 


element .style.display = 'block' ; 
element .style.marginTop = "10px' ; 


这 两 个 语句 分 别 设置 了 变量 element 的 img 元 素 实 例 的 特定 外 观 。 


document .body.appendchild (element) ; 
此 语句 将 变量 element 所 代表 的 img 元 素 实 例 ， 新 增 至 body 元 素 实例 内 ， 进 而 使 得 img 元 素 
实例 所 代表 的 图 像 ， 被 显示 在 网 页 里 。 


element .onload = display ; 
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此 语句 将 函数 名 称 display,， 赋 给 变量 element 所 代表 的 img 元 素 实例 中 的 属性 onload, 使 得 此 
img 元 素 实例 ， 被 完整 显示 在 网 页 里 时 ， 函 数 display() 就 会 被 调用 。 此 网 页 的 所 有 内 容 ， 被 显示 完 
成 之 前 ， 浏 览 器 会 在 其 调试 工具 【Console】 面 板 里 ， 显 示 出 如 下 3 行 信息 : 


® Animageisloaded. 
® Thispage has been loaded. 
® Thispage shows up after being loaded. 


从 如 上 3 行 信息 ， 可 看 出 其 执行 顺序 为 【网 页 内 的 图 像 文 档 被 加 载 完 成 一 网 页 本 身 被 加 载 完 
成 一 网 页 本 身 被 完整 显示 于 窗口 中 】。 


11.3.3 ”部 载 和 页 面 隐藏 事件 


特定 网 页 被 卸载 完成 时 ， 会 发 生 印 载 (unload) 事件 ; 若 特 定 网 页 已 经 被 隐藏 起 来 了 ， 则 会 发 
生 页 面 隐 藏 (page hide) 事件。 请 参看 如 下 示例 。 
【11-3-3-onunload-and-onpagehide.html】 


<!DOCTYPE html> 
<html> 
<head> 
<title> 整 体 页 面 的 page hide 与 unload 事件 </title> 
</head> 
<body> 
<a href="http://www.yahoo.com"> 按 此 到 新 页 面 </a> 
</body> 
<script> 
function display01 (event) 
{ 
console.log('This page is hidden.') ; 
} 


function display02 (event) 
{ 


console.1log('This page is unloaded.') ; 


} 


window.onpagehide = display01 ; 
window.onunload = display02 ; 
</script> 
</html> 


【相关 说 明 】 
<script> 


function display01 (event) 


{ 
console.1log('This page is hidden.') ; 


} 
此 语法 定义 了 带 有 参数 event 的 函数 display01()， 并 用 来 显示 出 【This page is hidden】 的 信息 。 
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function display02 (event) 
{ 

console.1og ('This page is unloaded.') ; 
} 


此 语法 定义 了 带 有 参数 event 的 函数 display02()， 并 用 来 显示 出 【This page is unloaded.】。 
window.onpagehide = display01 ; 
此 语句 在 window 对 象 实例 中 ， 设 置 其 属性 onpagehide 的 数据 ， 成 为 函数 名 称 display01， 使 
得 特定 网 页 被 隐藏 完成 时 ， 函 数 display01() 就 会 被 调用 。 
window.onunload = display02 ; 
此 语句 在 window 对 象 实例 中 ， 设 置 其 属性 onunload 的 数据 ， 成 为 函数 名 称 display02， 使 得 
此 网 页 被 卸载 完成 时 ， 函 数 display020 就 会 被 调用 。 此 网 页 被 卸载 完成 之 前 ,浏览 器 会 在 其 调试 工 
具 【Console】 面 板 里 ， 显 示 出 如 下 两 行 信息 : 
® Thispageishidden. 


® This pageis unloaded. 


从 如 上 两 行 信息 ， 可 看 出 其 执行 顺序 为 【网 页 被 隐藏 完成 一 网 页 被 卸载 完成 】。 网 页 印 载 的 
动作 ， 并 不 容易 被 调试 出 来 ， 建 议 采 用 如 下 操作 : 
@ 让 Google Chrome 浏览 器 先行 载 入 网 页 档 。 
ee “ 按 下 快捷 键 Ctrl + Shift + I， 启 动 调试 工具 ， 并 呈现 默认 的 【Console】〗】 面 板 。 
@ 在 网 页 里 ， 每 隔 半 秒 左右 ， 连 续 按 下 快捷 键 Ctrl+ 有 或 F5， 并 在 【Console]】 面板 里 ， 持 续 观 
察 闪 烁 的 信息 。 


11.3.4， 先 于 印 载 事 件 

特定 网 页 【即将 】 被 印 载 完毕 【之 前 】， 会 发 生 先 于 卸载 (before unload) 事件 。 换 言 之 ， 先 
于 印 载 事件 发 生 在 卸载 (unload) 事件 之 前 ! 请 参看 如 下 示例 。 

【11-3-4-onbeforeunload.js】 


let element = document .createElement ('a') ; 
element .href = 'http://www.tup.tsinghua.edu.cn' ; 
element .innerHTML = "Click here to another Page.' ; 


element .style.display = "block' ; 
element . style .marginTop = 'lem' ; 


document .body.appendCchild (element) ; 


function goodbye (event) 
{ 
return 1; 


} 
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// document .body.onbeforeunload = goodbye ; 
window.onbeforeunload = goodbye ; 


【相关 说 明 】 

let element = document .createElement ('a') ; 

语句 声明 了 初始 数据 为 【在 网 页 里 ， 代 表 超 链接 的 a 元素 实例 】 的 变量 element。 

element .href = 'http://www.tup.tsinghua.edu.cn' ; 

此 语句 将 代表 特定 网 址 的 字符 串 '"http:/www.tup.tsinghua.edu.cn'， 赋 给 变量 element 的 a 元 素 实 
例 中 的 属性 href。 换 言 之 ， 当 a 元 素 实例 所 代表 的 超 链接 ， 被 单 击 时 ， 浏 览 器 就 会 开启 上 述 网 址 对 
应 的 网 页 。 

element . innerHTML = 'Click here to another page.' ; 
此 语句 将 字符 串 'Click here to another page.'， 赋 给 变量 element 的 a 元 素 实例 中 的 属性 
innerHTML， 以 便 代表 超 链 接 上 的 文本 。 换言之 , 在 网 页 里 的 a 元 素 实例 上 , 浏览 器 会 显示 出 'Click 
here to another page.'， 作 为 超 链接 的 文本 。 


element .style.display = 'block' ; 
element .style.marginTop = 'lem’' ; 


这 两 个 语句 分 别 设置 了 变量 element 的 a 元素 实例 的 特定 外 观 。 
document .body .appendChild (element) ; 
此 语句 在 body 元 素 实例 中 ， 新 增 变 量 element 所 代表 的 a 元素 实例 ， 进 而 正式 显示 在 网 页 里 。 


function goodbye (event) 
{ 


return 1 3; 
在 本 示例 中 的 应 用 里 ， 此 语句 也 可 以 改写 成 为 【return";】、【return true ;】 或 【return false ;】 
} 

上 述 语法 定义 了 带 有 参数 event 的 函数 goodbye()。 


// document .body.onbeforeunload = goodbye ; 
window.onbeforeunload = goodbye ; 


此 语句 在 代表 浏览 器 窗口 (window) 的 window 对 象 实例 中 ,设置 其 属性 onbeforeunload 的 数 
据 ， 成 为 函数 名 称 goodbye， 使 得 当 用 户 单 击 上 述 网 页 里 的 超 链接 时 ， 浏 览 器 会 及 时 显示 【要 离开 
此 网 站 吗 ? 】 的 信息 对 话 框 。 请 留意 ， 在 函数 goodbye0 的 定义 里 ， 必 须 存 在 类 似 【return 1 ;】 的 
语句 。 


11.3.5 ”网 址 散 列 变化 事件 


在 浏览 器 的 地 址 栏 中 ,特定 网 址 在 符号 【#] 右 侧 的 锚 点 (anchor) 名 称 ， 被 变更 时 ， 会 发 生 网 
址 散 列 变化 (URL's hash changed) 事件 。 网 址 中 的 散 列 〈hash) 发 生变 化 ， 主 要 是 因为 在 浏览 器 
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窗口 中 ， 其 画面 跳 转 至 特定 网 页 里 的 特定 锚 点 (anchor) 位 置 。 请 参看 如 下 示例 。 
【11-3-5-onhashchange.js】 


console.1log (location.href) ; 
console.1log (location.hash) ; 
console.1log('') ; 


function change hash() 

{ 
// location.href += '#anchor01' ; 
location.hash = '#anchor01' ; 


console.1log (location.href) ; 
console.1log (location.hash) ; 
} 


function display message() 
{ 

console.log('Hash part in URL is changed.') ; 
} 


setTimeout (change hash, 2000) ; 


// document .body.onhashchange = display message ; 
window.onhashchange = display message ; 


【相关 说 明 】 

console.log (location.href) ; 

location.href 会 返回 特定 网 页 文档 在 网 站 服务 器 上 的 【网 址 】 字 符 串 ， 或 者 返回 【在 硬盘 中 】 
的 【文件 路 径 】 字 符 串 ， 例 如 【file://D:/works/books/publishers/ 示 例文 档 /js_tester.html】。 


console.log(location.hash) ; 
location.hash 返回 空 字符 串 "， 因 为 在 文件 路 径 的 字符 串 里 ， 尚 未 存在 散 列 【#anchor01】。 


console.10og('') ; 


function change hash() 


{ 


// location.href += "#anchor01' ; 
location.hash = '#anchor01' ; 


此 语句 等 价 于 【location.href += '#anchor01' ;】, 可 将 字符 串 '#anchor01', 赋 给 属性 location.hash， 
使 得 当前 网 址 的 末尾 , 被 加 上 作为 散 列 的 字符 串 【#anchor017, 例如 [file:///D:/works/books/publishers/ 
示例 文档 /js_tester.html#anchor01】。 


console.1og (location.href) ; 


互 


location.href 在 此 会 返回 已 经 被 加 上 字符 串 【#anchor01】 的 网 址 ， 例 如 【file:///D:/works/books/ 
publishers/ 示 例文 档 /js_tester.html#anchor01】。 


console.1og (location.hash) ; 
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location.hash 在 此 会 返回 字符 串 "#anchor01"， 因 为 在 文件 路 径 的 字符 重 
【#anchor01】 的 部 分 了 。 
} 


上 述 语法 定义 了 【用 来 动态 修改 网 址 里 的 散 列 】 的 函数 change_hash()。 
function display _ message () 
{ 


console.log('Hash part in URL is changed.') ; 
} 


册 


里 ， 已 经 存在 散 列 


总 


语法 定义 了 函数 display_message()。 
setTimeout (Change_hash，2000) ; 
此 语句 设置 了 在 2000 毫秒 (2 秒 ) 之 后 ， 调 用 名 称 为 change_hash 的 函数 。 


// document .body.onhashchange = display message ; 
window.onhashchange = display message ; 


i 


语句 等 价 于 【document.body.onhashchange = display_message ;】， 可 在 浏览 器 窗口 所 代表 的 
window 对 象 实例 中 ， 设 置 其 属性 onhashchange 的 数据 ， 成 为 函数 名 称 display_message， 使 得 其 网 
址 里 的 散 列 被 变更 时 , 函数 display_message(0 即 会 被 调用 , 进而 显示 出 [Hash part in URL is changed.】 
的 信息 。 


11.3.6 ”滚动 事件 


在 特定 网 页 里 ， 若 window 对 象 实例 、body 元 素 实例 或 者 其 他 子 元 素 实例 的 内 容 ， 被 滚动 时 ， 
就 会 发 生 滚动 〈scroll) 事件 。 请 参看 如 下 示例 。 


【11-3-6-onscroll.html】 


<!DOCTYPE html> 
<html> 
<head> 
<title>onscroll event</title> 
<style> 
body 
{ 
width: 1500px ; 
height: 1500px ; 
background-image: url (images/sandy texture.jpg) ; 
} 
</style> 
</head> 
<body> 
</body> 
<script> 
function action01() 
{ 
console.log('This page is scrolling.') ; 
} 
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window.onscroll = action01 ; 
</script> 
</html> 


【相关 说 明 】 


<script> 


function action01() 
{ 

console.log('This page is scrolling.') ; 
} 


此 语法 定义 了 函数 action010， 并 用 来 显示 出 【This page is scrolling.】 的 信息 。 

window.onscroll = action01 ; 

此 语句 在 window 对 象 实例 中 ， 设 置 其 属性 onscroll 的 数据 ， 成 为 函数 名 称 action01， 使 得 其 

网 页 里 的 水 平 或 垂直 滚动 条 ， 被 滚动 时 ， 函 数 action010 就 会 被 调用 ， 并 持续 显示 出 【This page is 
scrolling.】 的 信息 。 


11.4 表单 事件 


在 特定 网 页 中 , 针对 form 元 
单 (form) 事件 。 


实例 本 身 或 者 其 子 元 素 实例 , JavaScript 引擎 可 处 理 一 系列 的 表 


11.4.1 内 容 变 化 事件 


特定 input、select、textarea 元 素 实例 的 内 容 ， 被 变更 时 ， 就 会 发 生 内 容 变化 〈change) 事件。 
请 参考 如 下 示例 。 


【11-4-1-onchange.html]】 


<!DOCTYPE html> 
<html> 
<head> 
<title>Form related events</title> 
<style> 
input, button, select 
{ 
font-size: 1.2em ; 
} 
</style> 
</head> 
<body> 
<form style="text-align: center;"> 
<h3> 个 人 资料 </h3> 
<input type="text" id="username" name="username" placeholder="username" size="16"> 
<input type="password" id="password" name="password" placeholder="password" size="16"> 
<p></p> 
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<select id="select01" name="select01"> 
<option value="">choice of day-off</option> 
<option value="0">Sunday</option> 
<option value="1">Monday</option> 
<option value="2">Tuesday</option> 
<option value="3">Wednesday</option> 
<option value="4">Thursday</option> 
<option value="5">Friday</option> 
<option value="6">Saturday</option> 
</select> 


<p></p> 
<button type="submit">Login</button> 
<button type="reset">Reset</button> 
</form> 
</body> 
<script> 
select01.onchange = function (event) 
{ 
console.1og (event .target.value) ; 
人 
</script> 
</html> 


【相关 说 明 】 


<script> 
select01.onchange = function (event) 
{ 


console.log (event .target.value) ; 

在 此 语句 中 的 event.target， 会 对 应 到 其 属性 id 的 数据 为 'select01' 的 select 元 素 实例 。 在 这 个 
select 元 素 实例 中 ， 欲 访问 被 变更 之 后 的 选 定 项 目的 数据 ， 可 借助 在 select 元 素 实例 中 ， 被 内 置 的 
属性 value， 来 加 以 实现 。 

ES 

上 述 语法 将 匿名 函数 的 定义 ， 赋 给 其 属性 id 的 数据 为 'select01' 的 select 元 素 实 例 中 的 属性 
onchange。 一 旦 这 个 select 元 素 实 例 的 选 定 项 目 被 变更 ， 上 述 的 匿名 函数 就 会 被 调用 ， 使 得 被 变更 
之 后 的 选 定 项 目的 数据 ， 显 示 在 浏览 器 的 调试 工具 【Console】 面 板 里 。 


11.4.2 ”获取 和 失去 焦点 相关 事件 


在 特定 form 元 素 实例 中 ， 焦 点 移入 (focus in) 特定 子 元 素 实例 (例如 input、button 元 素 实 例 
等 ) 时 , 会 发 生 焦 点 移入 (focus in) 事件 ; 焦点 移出 (focus out) 特定 子 元 素 实 例 时 ， 则 会 发 生 【 失 
去 焦点 】 的 模糊 (blur) 事件 。 请 参看 如 下 示例 。 

【11-4-2-focus-in-and-out.html】 


<!DOCTYPE html> 
<html> 
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【相关 说 明 】 


在 此 语句 中 ，event.target 会 对 应 到 刚才 失去 焦点 (blur) 而 且 【 属 性 id 的 数据 为 "username'】 
的 input 元 素 实例 。 


上 述 语法 将 带 有 参数 event 的 匿名 函数 的 定义 , 赋 给 了 属性 id 的 数据 为 username' 的 input 元 素 
实例 中 的 属性 onblur。 一 旦 键盘 光标 离开 input 元 素 实例 ， 也 就 是 input 元 素 实例 失去 焦点 〈blur) 
时 ， 上 述 匿名 函数 就 会 被 调用 ， 使 得 input 元 素 实例 具有 灰色 轮廓 (outline) 。 
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username.onfocus = function (event) 


{ 
event .target.style.outline = '3px solid YellowGreen' ; 
a 


上 述 语法 将 带 有 参数 event 的 匿名 函数 的 定义 , 赋 给 属性 id 的 数据 为 "username' 的 input 元 素 实 
例 的 属性 onfocus。 一 旦 键盘 光标 进入 input 元 素 实例 ,也 就 是 input 元 素 实例 获取 焦点 (focus) 时 ， 
上 述 的 匿名 函数 就 会 被 调用 ， 使 得 input 元 素 实例 具有 较 粗 的 黄 绿色 轮廓 。 


form01.addEventListener("focusin"，() => console.log('Focus-in event occurs.')) ; 


此 语句 通过 调用 addEventListener() 函 数 ， 使 得 属性 id 的 数据 为 'form0l' 的 form 元 素 实例 ， 被 
监听 着 焦点 进入 (focus in) 事件 。 一 旦 属性 id 的 数据 为 form01' 的 form 元 素 实例 ， 获 取 焦 点 ， 也 
就 是 键盘 光标 进入 form 元 素 实例 时 ， 显 示 【Focus-in event occurs.】 信 息 的 箭头 函数 就 会 被 调用 。 


form01.addEventListener("focusout"， () => console.log('Focus-out event occurs.')) ; 


此 语句 通过 调用 addEventListener() 函 数 ， 使 得 属性 id 的 数据 为 'form0l' 的 form 元 素 实例 ， 被 
监听 着 焦点 离开 (focus out) 事件 。 一旦 属性 id 的 数据 为 form01' 的 form 元 素 实例 失去 
是 键盘 光标 离开 form 元 素 实例 时 ， 显 示 【Focus-out event occurs.】 信 息 的 箭头 函数 就 会 被 调用 。 


11.4.3 ”输入 事件 


当 用 户 输入 特定 文本 到 特定 input 或 textarea 元 素 实 例 中 时 ， 会 发 生 输 入 (input) 事件。 请 参 
看 如 下 示例 。 
【11-4-3-oninput.html]】 


<!DOCTYPE html> 
<html> 
<head> 
<title>Form related events</title> 
<style> 
input, button, select 
{ 
font-size: 1.2em ; 
} 
</style> 
</head> 
<body> 
<form style="text-align: center;"> 
<h3> 个 人 资料 </h3> 
<input type="text" id="username" name="username" placeholder="username" size="16"> 
<input type="password" id="password" name="password" placeholder="password" size="16"> 
<p></p> 
<select id="select01" name="select01"> 
<option value="">choice of day-off</option> 
<option value="0">Sunday</option> 
<option value="1">Monday</option> 
<option value="2">Tuesday</option> 
<option value="3">Wednesday</option> 
<option value="4">Thursday</option> 
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【相关 说 明 】 


此 语法 将 带 有 参数 event 的 匿名 函数 的 定义 , 赋 给 属性 id 的 数据 为 usemame' 的 input 元 素 实例 
的 属性 oninput。 一 旦 input 元 素 实例 开始 被 输入 (input) 文本 时 ， 上 述 匿 名 函数 就 会 被 调用 ， 使 得 
input 元 素 实 例 的 数据 〈 被 输入 的 文本 ) ， 被 显示 在 浏览 器 的 调试 工具 【Console】 面 板 里 。 


11.4.4 “无 效 事件 


在 网 页 里 的 form 元 素 实例 中 ， 任 何 被 设置 为 必 填 (required) 或 其 文本 必须 符合 特定 模式 
Cpattermn) 的 input 元 素 实例 的 数据 ， 被 提交 (submitted) 时 ， 若 未 被 填 入 任何 文本 或 者 不 符合 特 
定 模式 ， 则 会 发 生 无 效 (invalid) 事件。 请 参看 如 下 示例 。 


【11-4-4-oninvalid.html] 
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实例 的 属性 oninva 
input 元 素 实例 被 输入 的 文本 ， 不 符合 要 求 时 ， 
， 被 显示 在 浏览 器 的 调试 工具 【Console】 面 板 里 。 

属性 id 的 数据 为 Wsemame' 的 input 元 素 实例 , 被 设置 了 属性 required ( 必 填 的 ) ， 


username!】 的 信息 


required> 


<input type="password" id="password" name="password" placeholder="password" size="16" 


required> 

<p></p> 

<select id="select01" name="select01"> 
<option value="">choice of day-off</option> 
<option 
<option 
<option 
<option 
<option 
<option 
<option 

</select> 


value="0">Sunday</option> 
value="1">Monday</option> 
value="2">Tuesday</option> 
value="3">Wednesday</option> 
value="4">Thursday</option> 
value="5">Friday</option> 
value="6">Saturday</option> 


<p></p> 
<button type="submit">Login</button> 
<button type="reset">Reset</button> 
</form> 
</body> 
<script> 
username.oninvalid = function (event) 
{ 
console.1og('Need to type username!') ; 
和 
</script> 
</html> 


【相关 说 明 】 


<script> 


username.oninvalid = function (event 


{ 


console.log('Need to type username!') ; 
je 
上 述 语法 将 带 有 参数 event 的 匿名 函数 的 定义 , 赋 给 了 


在 本 示例 中 ， 


所 以 未 输入 任何 文本 ， 就 被 提交 时 ， 即 是 不 符合 要 求 的 。 


11.4.5” 重 置 事件 


在 网 页 里 的 form 元 素 实例 中 , 输入 的 文本 或 选 定 的 数据 , 被 


事件 。 请 参看 如 下 示例 。 


【11-4-5-onreset.html]】 


<!DOCTYPE html> 


属性 id 的 数据 为 "username' 的 input 元 素 


id。 在 form 元 素 实 例 中 ， 带 有 【type="submit"】 的 提交 钮 ， 被 按 下 之 后 ， 一 旦 
上 述 匿 名 函数 就 会 被 调用 ， 使 得 【Need to type 


置 (reset) 时 , 会 发 生 


置 (reset) 
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【相关 说 明 】 


上 述 语 法 将 带 有 参数 event 的 匿名 函数 的 定义 , 赋 给 了 属性 id 的 数据 为 'form01' 的 form 元 素 实 
例 的 属性 onreset。 在 form 元 素 实例 中 ， 带 有 【type="reset"】 的 重 置 按钮 ， 被 按 下 时 ， 匿 名 函数 就 
会 被 调用 ， 使 得 【Data of the form is reset!】 的 信息 ， 被 显示 在 浏览 器 的 调试 工具 【Console】 面 板 里 。 
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所 谓 的 重 置 (reset) ， 就 是 指 特定 form 元 素 实例 内 的 默认 数据 ， 被 复原 成 为 浏览 器 载 入 时 的 
初始 状态 。 例 如: 若 属性 id 的 数据 为 username' 的 input 元 素 实 例 ,被 输入 文本 之 后 , 带 有 [type="reset"】 
的 重 置 按 钮 ， 才 被 按 下 时 ， 则 此 input 元 素 实例 ， 会 被 复原 成 为 没有 任何 文本 的 初始 状态 ! 


11.4.6 ”搜索 事件 


在 网 页 里 的 form 元 素 实例 中 ， 其 属性 type 的 数据 为 字符 串 'search' 的 input 元 素 实 例 ， 被 输入 
文本 之 后 ， 被 按 下 键盘 上 的 ENTER 键 ， 或 者 单 击 input 元 素 实例 的 右 侧 【X】 形 状 的 关闭 按钮 时 ， 
就 会 发 生 搜 索 (search) 事件 。 请 参看 如 下 示例 。 

【11-4-6-onsearch.html】 


<!DOCTYPE html> 
<htm1> 
<head> 
<title>Form related events</title> 
<style> 
input, button, select 
{ 
font-size: 1.2em ; 
margin: 5Px ; 
} 
</style> 
</head> 
<body> 
<form id="form01" name="form01" style="text-align: center;"> 
<h3> 个 人 资料 </h3> 
<input type="text" id="username" name="username" placeholder="username" size="]16" 
required> 
<input type="password" id="password" name="password" placeholder="password" size="16" 
required> 
<p></p> 
<select id="select01" name="select01"> 
<option value="">choice of day-off</option> 


<option value="0">Sunday</option> 
<option value="1">Monday</option> 
<option value="2">Tuesday</option> 
<option value="3">Wednesday</option> 
<option value="4">Thursday</option> 
<option value="5">Friday</option> 
<option value="6">Saturday</option> 
</select> 
<input type="search" id="search" name="search" placeholder="job category.." size="9"> 


<p></p> 
<button type="submit">Login</button> 
<button type="reset">Reset</button> 
</form> 
</body> 
<script> 
// IE and Firefox don't support this event. 
search.onsearch = function (event) 
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的 


console.log('The query is searched.') ; 
} 
</script> 
</html> 


【相关 说 明 】 


<script> 


// IE and Firefox don't support this event. 
search.onsearch = function (event) 
{ 

console.log('The query is searched.') ; 
Py 


上 述 语法 将 带 有 参数 event 的 匿名 函数 的 定义 ， 赋 给 属性 id 的 数据 为 'search' 的 input 元 素 实例 
属性 onsearch。 在 input 元 素 实例 内 ， 被 输入 文本 之 后 ， 被 按 下 键盘 上 的 Enter 键 ， 以 进行 搜索 


(search) 时 ， 上 述 匿 名 函数 就 会 被 调用 ， 使 得 【The query is searched.】 的 信息 ， 被 显示 在 浏览 器 
的 调试 工具 【Console】 面 板 里 。 请 留意 ，Firefox 与 正 浏览 器 并 不 支持 onsearch 事件 的 处 理 。 


11.4.7” 选 定 文本 事件 


在 网 页 里 的 input 或 textarea 元 素 实 例 中 ， 其 内 容 的 任何 文本 ， 被 选 定 〈selected) 时 ， 都 会 发 


生 选 定 (select) 文本 事件 。 请 参看 如 下 示例 。 


【11-4-7-onselect.html) 


<!DOCTYPE html> 
<html> 
<head> 
<title>Form related events</title> 
<style> 
input, button, select 
{ 
font-size: 1.2em ; 
margin: 5px 7 
} 
</style> 
</head> 
<body> 
<form id="form01" name="form01" style="text-align: center;"> 
<h3> 个 人 资料 </h3> 
<input type="text" id="username" name="username" placeholder="username" size="16" required> 
<input type="password" id="password" name="password" placeholder="password" size="16" 
required> 
<p></p> 
<select id="select01" name="select01"> 
<option value="">choice of day-off</option> 
<option value="0">Sunday</option> 
<option value="1">Monday</option> 
<option value="2">Tuesday</option> 
<option value="3">Wednesday</option> 


308 | Javascript 编程 思想 : 从 ES5 到 ES9 


【相关 说 明 】 


上 述 语 法 将 带 有 参数 event 的 匿名 函数 的 定义 ， 赋 给 属性 id 的 数据 为 'search' 的 input 元 素 实例 
的 属性 onselect。 在 input 元 素 实例 内 ， 输 入 文本 之 后 ， 而 且 其 文本 的 一 部 分 ， 被 选 定 (selected) 
时 ， 上 述 匿名 函数 就 会 被 调用 ， 使 得 【The query text is selected.】 的 信息 ， 被 显示 在 浏览 器 的 调试 
工具 【Console】 面 板 里 。 


11.4.8 ”提交 事件 


在 网 页 里 的 form 元 素 实例 中 ， 其 数据 被 提交 〈submitted) 时 ， 会 发 生 提 交 (submit)〉 事件。 
请 参看 如 下 示例 。 
【11-4-8-onsubmithtml】 
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<form id="form01" name="form01" style="text-align: center;"> 

<h3> 个 人 资料 </h3> 

<input type="text" id="username" name="username" placeholder="username" size="16" 
required> 

<input type="password" id="password" name="password" placeholder="password" size="16" 
required> 

<p></p> 

<select id="select01" name="select01"> 
<option value="">choice of day-off</option> 
<option value="0">Sunday</option> 
<option value="1">Monday</option> 
<option value="2">Tuesday</option> 
<option value="3">Wednesday</option> 
<option value="4">Thursday</option> 
<option value="5">Friday</option> 
<option value="6">Saturday</option> 

</select> 

<input type="search" id="search" name="search" placeholder="job category.." size="9"> 


<p></p> 
<button type="submit">Login</button> 
<button type="reset">Reset</button> 
</form> 
</body> 
<script> 
form01.onsubmit = function (event) 
{ 
alert ('Data of the form is submitted.') ; 
3 
</script> 
</html> 


【相关 说 明 】 


<script> 


form01 .onsubmit = function (event) 
{ 
alert ('Data of the form is submitted.') ; 


fe 
此 语法 将 带 有 参数 event 的 匿名 函数 的 定义 , 赋 给 属性 id 的 数据 为 'form01' 的 form 元 素 实例 的 
属性 onsubmit。 在 form 元 素 实例 内 ， 其 所 有 必 填 的 各 元 素 实 例 〈 例 如 input、select、textarea 元 素 
实例 等 ) ， 被 填 妥 之 后 ， 一 旦 带 有 【type="submit" 】 的 提交 按钮 ， 被 按 下 时 ， 上 述 匿 名 函数 就 会 被 
调用 ， 使 得 带 有 信息 【Data of the form is submitted.】 的 对 话 框 ， 被 显示 在 浏览 器 窗口 当中 。 


11.5 练 习 题 


至 少 通过 两 种 方式 ， 改 写 如 下 HTML 和 JavaScript 的 源 代码 片段 : 


<button id="login btn" onclick="display()">Login</button> 
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1 

<script> 
function display() 
{ 

| 

} 

</script> 

2. 已 知 当前 的 网 址 为 file:///..…/htm1/6-3-6-onscroll.html#list01。 试 编写 JavaScript 源 代码 ， 以 便 
当前 网 址 被 变更 为 如 下 网 址 时 ， 可 让 显示 特定 信息 的 函数 display_message() 被 调用 : 


file:///../html/6-3-6-onscroll.html#1ist02 


3. 已 知 在 当前 网 页 里 ， 存 在 代表 文本 字段 而 且 【 属 性 id 的 数据 为 username'】 的 input 元 素 实 
例 。 至 少 编写 两 个 版 本 的 JavaScript 源 代码 ， 以 在 当前 网 页 被 加 载 完成 之 后 ， 自 动 将 键盘 光标 ， 移 
入 上 述 文本 字段 中 。 


第 12 章 
DOM 的 事件 处 理 (二 ) 


本 章 主 要 介绍 多 个 与 指针 设备 相关 的 拖 动 事件 、 与 操作 系统 相关 的 剪贴 板 事件 、 与 多 媒体 相 
关 的 视频 和 音频 事件 ， 以 及 与 视觉 体验 相关 的 动画 及 过 渡 事 件 。 


12.1 拖 动 事件 


在 特定 网 页 里 ， 任 何 元 素 实 例 ， 被 持续 拖 动 时 ， 都 会 发 生 拖 动 (drag) 相关 的 事件 。 


12.1.1 正在 拖 动 事件 


任何 元 素 实例 被 拖 动 之 后 ， 一 直到 拖 动 结束 之 前 ， 都 会 持续 发 生 正在 拖 动 (drag) 事件 。 请 参 
看 如 下 示例 


【12-1-1-ondrag.html] 


<!DOCTYPE html> 
<html> 
<head> 
<title>Drag related events</title> 
<style> 
#divO1 
{ 
padding: 5px ; 
width: 100px ; 
height: 100px ; 
background-color: RoyalBlue ; 
} 


[id^=span] 
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【相关 说 明 】 


此 for 循环 语句 会 迭代 2 次 循 。 


此 语法 在 属性 id 的 数据 为 'span01' 与 'span02' 的 span 元 素 实例 中 ， 进 一 步 简 化 了 访问 其 特定 属 
性 的 语法 。 例 如 : 

e 【spna01.draggable=true ;】 在 其 大 括号 里 ， 可 被 简化 成 为 【draggable = true ;】 

® 【span01.ondrag = function (event) { .… } ;】〗， 在 其 大 括号 里 ， 可 被 简化 成 为 【ondrag = function 
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(event) {...} ;]. 


此 语句 将 布尔 值 tue， 赋 给 属性 id 的 数据 为 'span01' 和 'span02' 的 span 元 素 实例 中 的 属性 
draggable， 使 得 这 两 个 span 元 素 实例 ， 在 网 页 里 可 被 拖 动 。 


上 述 语 法 将 带 有 参数 event 的 匿名 函数 的 定义 ， 赋 给 属性 id 的 数据 为 'span01' 与 'span02' 的 span 
元 素 实例 中 的 属性 ondrag. 特定 span 元 素 实例 被 拖 动 时 , 上 述 匿名 函数 就 会 被 调用 , 使 得 类 似 【Box 
X is dragged.…】 的 信息 ， 被 显示 在 浏览 器 的 调试 工具 【Console】 面 板 里 。 


12.1.2 ” 拖 动 结束 事件 


任何 元 素 实例 被 拖 动 结束 的 瞬间 ， 都 会 发 生 拖 动 结束 〈drag end) 事件 。 请 参看 如 下 示例 。 
【12-1-2-ondragend.html]】 
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【相关 说 明 】 


此 for 循环 语句 会 迭代 2 次 。 


此 语法 在 其 属性 id 的 数据 为 'span01' 与 'span02' 的 span 元 素 实 例 中 ， 简 化 了 访问 其 特定 属性 的 
语法 。 例 如 : 


@ 【spna01.draggable=true ;】 在 其 大 括号 里 ， 可 被 简化 成 为 【draggable = true ;】 
e 【span01.ondrag = function (event) { .… } 3;】 在 其 大 括号 里 ， 可 被 简化 成 为 【ondrag = function 
(evenb {...};)]. 


此 语句 将 布尔 值 tue， 赋 给 属性 id 的 数据 为 'span01' 和 'span02' 的 span 元 素 实例 中 的 属性 
draggable， 使 得 这 两 个 span 元 素 实例 在 网 页 里 ， 可 被 拖 动 。 
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{ 
console.log(`Box ${i} is dragged..) ; 
‘I 
此 语法 将 带 有 参数 event 的 匿名 函数 的 定义 , 赋 给 属性 id 的 数据 为 'span01' 与 'span02' 的 span 元 
素 实例 中 的 属性 ondrag。 特 定 span 元 素 实例 被 拖 动 时 ， 上 述 匿 名 函数 就 会 被 调用 ， 使 得 类 似 【Box 
X is dragged...】 的 信息 ， 被 显示 在 浏览 器 的 调试 工具 【Console】 面 板 里 。 


ondragend = function (event) 
{ 


console.log( ‘The dragging of Box ${i} is ended....); 
bs 


此 语法 将 带 有 参数 event 的 匿名 函数 的 定义 , 赋 给 属性 id 的 数据 为 'span01' 与 'span02' 的 span 元 
素 实 例 中 的 属性 ondragend。 特 定 span 元 素 实例 被 终止 拖 动 时 ， 上 述 匿名 函数 就 会 被 调用 ， 使 得 类 
似 【The dragging ofBox X is ended.…】 的 信息 ， 被 显示 在 浏览 器 的 调试 工具 【Console】 面 板 里 。 


12.1.3 ” 拖 动 进入 事件 


在 任何 元 素 实例 被 拖 动 当中 ， 鼠 标 指针 进入 到 另 一 元 素 实例 的 瞬间 ， 会 发 生 拖 动 进入 〈drag 
enter) 事件 。 请 参看 如 下 示例 。 
【12-1-3-ondragenter.html]】 


<!DOCTYPE html> 
<html> 
<head> 
<title>Drag related events</title> 
<style> 
[id^=div] 
{ 
padding: 5px ; 
width: 100px ; 
height: 100px ; 
} 


#div01 
background-color: RoyalBlue ; 
} 


#div02 
{ 
margin-top: 10px ; 
background-color: YellowGreen ; 
} 


[id^=span] 
{ 

color: Teal ; 
width: 80px ; 
height: 30px ; 
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【相关 说 明 】 


此 语法 将 带 有 参数 event 的 匿名 函数 的 定义 ， 赋 给 属性 id 的 数据 为 div02' 的 div 元 素 实例 中 的 
属性 ondragenter。 特 定 span 元 素 实例 被 拖 动 ， 而 进入 属性 id 的 数据 为 'div02' 的 div 元 素 实例 时 ， 
上 述 匿名 函数 就 会 被 调用 ， 使 得 【The dragged Box enters the target..】 的 信息 ， 被 显示 在 浏览 器 的 
调试 工具 【Console】 面 板 里 。 


12.1.4 ” 拖 动 离开 事件 


在 任何 元 素 实例 被 拖 动 当中 ， 和 鼠标 指针 接触 到 上 层 元 素 实例 的 边缘 的 瞬间 ， 会 发 生 拖 动 离开 
(drag leave) 事件 。 请 参看 如 下 示例 。 


【12-1-4-ondragleave.html]】 
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【相关 说 明 】 
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将 带 有 参数 event 的 匿名 函数 的 定义 赋 给 属性 id 的 数据 为 div0l' 的 div 元 素 实例 的 属性 


ondragleave。 特 定 span 元 素 实例 被 拖 动 而 离开 属性 id 的 数据 为 'div01' 的 div 元 素 实 例 的 瞬间 ， 匿 名 
函数 就 会 被 调用 ， 使 得 【The dragged Box leaves the source.】 的 信息 ， 显 示 在 浏览 器 调试 工具 


【Console】 面 板 里 。 


12.1.5“ 拖 动 悬 停 事件 


在 任何 元 素 实例 被 拖 动 当中 ， 鼠 标 指针 位 于 特定 元 素 实例 的 范围 内 时 ， 会 发 生 拖 动 悬 停 (drag 
over) 事件 。 请 参看 如 下 示例 。 


【12-1-5-ondragover.html]】 
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【相关 说 明 】 


此 语法 将 带 有 参数 event 的 匿名 函数 的 定义 ， 赋 给 属性 id 的 数据 为 'div02' 的 div 元 素 实例 中 的 
属性 ondragover。 特定 span 元 素 实例 仍然 在 属性 id 的 数据 为 div02' 的 div 元 素 实例 的 范围 内 ， 而 被 
拖 动 时 ， 上 述 匿 名 函数 就 会 被 调用 ， 使 得 【The Box is being dragged over the target.】 的 信息 ， 会 被 
显示 在 浏览 器 的 调试 工具 【Console】 面 板 里 。 


12.1.6 ” 拖 动 开始 事件 


任何 元 素 实例 被 开始 拖 动 的 瞬间 ， 会 发 生 拖 动 开始 (drag start) 事件 。 请 参看 如 下 示例 。 
【12-1-6-ondragstart.html】 
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【相关 说 明 】 


将 带 有 参数 event 的 匿名 函数 的 定义 赋 给 属性 id 的 数据 为 'div01' 的 div 元 素 实例 的 属性 
ondragstart。 特定 span 元 素 实 例 开始 被 拖 动 时 , 匿名 函数 就 会 被 调用 , 使 得 [The Box is being dragged 
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over the source.】 的 信息 显示 在 浏览 器 调试 工具 【Console】 面 板 里 。 


12.1.7 ”放下 事件 


拖 动 尚未 结束 之 前 ， 若 鼠标 指针 仍然 位 于 特定 元 素 实例 的 范围 里 ， 则 当 鼠 标 左 键 被 松 开 时 ， 
会 发 生 放 下 〈drop) 事件 。 请 参看 如 下 示例 。 


【12-1-7-ondrop.html】 
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【相关 说 明 】 


为 了 达成 拖 放 机 制 ， 并 简化 读者 们 的 理解 ,这 里 将 【允许 特定 元 素 实例 被 拖 动 】 的 属性 draggable， 
以 及 【用 来 监听 拖 动 悬 停 事件 了 的 属性 ondragover, 分 别 放置 于 属性 id 的 数据 为 'span01' 与 'span02' 的 span 
元 素 实例 本 身 ， 以 及 属性 id 的 数据 为 div01' 与 'div02' 的 div 元 素 实例 本 身 的 HTML 源 代码 里 。 


此 语句 声明 了 初始 数据 为 空 值 (null) 的 变量 ref。 
TT 


此 for 循环 语句 会 迭代 2 次 。 
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document .getElementById('span0' + i).ondragstart = function (event) 

{ 

ref = event.target ; 
和 
此 语法 将 带 有 参数 event 的 匿名 函数 的 定义 , 赋 给 属性 id 的 数据 为 'span01' 与 'span02' 的 span 元 

素 实例 的 属性 ondragstart。 特 定 span 元 素 实 例 开始 被 拖 动 时 ， 上 述 匿名 函数 就 会 被 调用 ， 使 得 变 
量 ref 的 数据 ,成 为 event.target 对 应 的 元 素 实例 .在 此 ,event.target 会 对 应 到 属性 id 的 数据 为 'span01' 
或 'span02' 的 元 素 实例 。 


document .getElementById('div0' + i).ondrop = function (event) 
{ 


// event.preventDefault (); 
event.target .appendchild (ref) ; 


此 语句 将 属性 id 的 数据 为 'span01' 与 'span02' 的 span 元 素 实 例 ， 新 增 至 属性 id 的 数据 为 'div01' 
或 'div02' 的 div 元 素 实例 中 。 


console.log(‘The Box is dropped in the target。) ; 
NE 


上 述 语法 将 带 有 参数 event 的 匿名 函数 的 定义 ， 赋 给 属性 id 的 数据 为 div01' 和 'div02' 的 div 元 
素 实例 的 属性 ondrop。 特 定 span 元 素 实例 被 放 入 特定 div 元 素 实例 时 ， 上 述 匿名 函数 就 会 被 调用 ， 
以 便 允 许 在 当前 event.target 所 对 应 的 div 元 素 实 例 中 ， 放 入 特定 span 元 素 实 例 。 在 此 ，event.target 
会 对 应 到 属性 id 的 数据 为 'div01' 或 'div02' 的 元 素 实例 。 


12.2 “剪贴 板 事件 


在 特定 网 页 里 , 特定 元 素 实 例 内 的 文本 , 被 复制 、 剪 切 或 粘贴 来 自 操作 系统 的 剪贴 板 (clipboard) 
就 会 发 生前 贴 板 〈clipboard event) 相关 事件 。 请 参看 如 下 示例 。 
【12-2-^-clipboard-events.html】 


<!DOCTYPE html> 
<html> 
<head> 
<title>Form related events</title> 
<style> 
input, button, select 
{ 


font-size: 1.2em ; 


时 


margin: 5Px 7 
} 
</style> 
</head> 
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【相关 说 明 】 
请 进一步 参看 本 节 中 各 小 节 的 说 明 。 


12.2.1 复制 事件 


在 特定 网 页 里 ， 代 表 文本 字段 的 特定 元 素 实例 内 的 文本 ， 被 复制 到 操作 系统 的 剪贴 板 时 ， 会 
发 生 剪贴 板 的 复制 (copy) 事件 。 请 参看 如 下 示例 。 
【相关 说 明 】 
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search.oncopy = function (event) 
{ 
console.log('Data of the search input is copied.') ; 
二 
此 语法 将 带 有 参数 event 的 匿名 函数 的 定义 ， 赋 给 属性 id 的 数据 为 search' 的 input 元 素 实 例 的 
属性 oncopy。input 元 素 实例 内 的 文本 ， 被 复制 (copy) 时 ， 上 述 匿 名 函数 就 会 被 调用 ， 使 得 【Data 
of the search input is copied.】， 被 显示 在 浏览 器 的 调试 工具 【Console】 面 板 里 。 


12.2.2 ” ”和音 切 事件 


在 特定 网 页 里 ， 特 定 元 素 实 例 内 的 文本 被 剪 切 到 操作 系统 的 剪贴 板 时 ， 会 发 生 剪 贴 板 的 剪 切 
Ccut) 事件 。 
【相关 说 明 】 
search.oncut = function (event) 
{ 


console.log('Data of the search input is cut.') ; 
yo 


将 带 有 参数 event 的 匿名 函数 的 定义 赋 给 属性 id 的 数据 为 'search' 的 input 元 素 实例 的 属性 
oncut。 input 元 素 实例 内 的 文本 被 前 切 (cut) 时 , 匿名 函数 就 会 被 调用 , 使 得 【Data of the search input 
is cut.】 显 示 在 浏览 器 调试 工具 【Console】 面 板 里 。 


12.2.3 ”粘贴 事件 


在 特定 网 页 里 ， 于 代表 文本 字段 的 特定 元 素 实例 内 ， 被 粘贴 来 自 操作 系统 的 剪贴 板 的 文本 时 ， 
会 发 生前 贴 板 的 粘贴 (paste) 事件 。 请 参看 如 下 示例 。 
【相关 说 明 】 


search.onpaste = function (event) 
{ 
console.log('Data of the search input is pasted.') ; 


和 

此 语法 将 带 有 参数 event 的 匿名 函数 的 定义 ， 赋 给 属性 id 的 数据 为 search' 的 input 元 素 实例 的 属 

性 onpaste。 在 代表 文本 字段 的 特定 input 元素 实例 内 ， 粘 贴 (paste) 特定 文本 时 ， 上 述 匿名 函数 就 会 
被 调用 ， 使 得 【Data is pasted into the search input.】 被 显示 在 浏览 器 的 调试 工具 【Console】 面 板 里 。 


12.3 ”视频 和 音频 事件 


在 特定 网 页 里 ， 浏 览 器 处 理 视频 (video) 和 音频 (audio) 的 过 程 中 ， 会 发 生 视频 和 音频 的 相 
关 事件 。 
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12.3.1 加 载 相 关 事件 


浏览 器 加 载 特定 视频 或 音频 , 至 特定 网 页 里 的 video 或 audio 元 素 实 例 时 , 就 会 发 生 加 载 (l0ad ) 
相关 事件 。 请 参看 如 下 示例 。 


【12-3-1-loading-events.html] 
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【相关 说 明 】 
<script> 
video.onloadstart = function (event) 
{ 
console.log('The video is being loaded.') ; 
es 
此 语法 将 带 有 参数 event 的 匿名 函数 的 定义 ， 赋 给 属性 id 的 数据 为 "video' 的 video 元 素 实例 的 
属性 onloadstart。 特 定 video 元 素 实例 的 视频 (video) 已 经 开始 被 加 载 时 ， 上 述 匿名 函数 就 会 被 调 
用 ， 使 得 【The video is loading.】， 被 显示 在 浏览 器 的 调试 工具 【Console】 面 板 里 。 
video .ondurationchange = function (event) 
{ 
console.log('The video\'s duration has changed.') ; 
SE 
此 语法 将 带 有 参数 event 的 匿名 函数 的 定义 ， 赋 给 属性 id 的 数据 为 'video' 的 video 元 素 实例 的 
属性 ondurationchange。 对 于 特定 video 元 素 实例 的 视频 (video) ， 其 持续 时 间 已 经 从 NaN (not a 
numbeD， 变 更 为 实际 的 时 间 长 度 时 ， 上 述 匿 名 函数 就 会 被 调用 ， 使 得 【The video's duration has 
changed.】， 被 显示 在 浏览 器 的 调试 工具 【Console】 面 板 里 。 
video.onloadedmetadata = function (event) 
{ 
console.log('The video\'s meta data has been loaded.') ; 
I 
此 语法 将 带 有 参数 event 的 匿名 函数 的 定义 ， 赋 给 属性 id 的 数据 为 'video' 的 video 元 素 实例 的 
属性 onloadedmetadata。 特 定 video 元 素 实例 的 视频 (video) 的 元 数据 (metadata) ， 已 经 被 加 载 
完成 时 ， 上 述 匿名 函数 就 会 被 调用 ， 使 得 【The video's meta data has been loaded.】， 被 显示 在 浏览 
器 的 调试 工具 【Console】 面 板 里 。 
video .onprogress = function (event) 
{ 
console.log('The video is being downloaded.') ; 
了 
此 语法 将 带 有 参数 event 的 匿名 函数 的 定义 ， 赋 给 属性 id 的 数据 为 "video' 的 video 元 素 实例 的 
属性 onprogress。 特 定 video 元 素 实例 的 视频 (video) ， 处 于 被 下 载 的 状态 时 ， 上 述 匿名 函数 就 会 
被 调用 ， 使 得 【The video is being downloaded.】， 被 显示 在 浏览 器 的 调试 工具 【Console】 面 板 里 。 


video.onloadeddata = function (event) 
{ 
console.log('The video\'s first frame has been loaded.') ; 
| 
此 语法 将 带 有 参数 event 的 匿名 函数 的 定义 ， 赋 给 属性 id 的 数据 为 'video' 的 video 元 素 实例 的 

属性 onloadeddata。 特 定 video 元 素 实例 的 视频 (video) 的 第 1 帧 〈first frame) ， 已 经 被 加 载 完成 
寺 ， 上 述 匿 名 函数 就 会 被 调用 ， 使 得 【The video's first frame has been loaded.】， 被 显示 在 浏览 器 的 
调试 工具 【Console】 面 板 里 。 
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video.oncanplay = function (event) 
{ 
console.l0og('The video has been loaded enough to play now.') ; 


Pe 
此 语法 将 带 有 参数 event 的 匿名 函数 的 定义 ， 赋 给 属性 id 的 数据 为 "video' 的 video 元 素 实例 的 
属性 oncanplay。 特 定 video 元 素 实例 的 视频 (video) ， 处 于 可 被 播放 (can be played) 的 状态 时 ， 
上 述 匿名 函数 就 会 被 调用 ， 使 得 【The video has been loaded enough to play now.】， 被 显示 在 浏览 
器 的 调试 工具 【Console】 面 板 里 。 


video .oncanplaythrough = function (event) 
{ 
console.log('The video has been loaded "completely", and can Play now.') ; 
Ce 
此 语法 将 带 有 参数 event 的 匿名 函数 的 定义 ， 赋 给 属性 id 的 数据 为 "video' 的 video 元 素 实例 的 
属性 oncanplaythrough。 特 定 video 元 素 实 例 的 视频 (video) 已 经 被 加 载 完成 ， 并 处 于 从 头 到 尾 可 
被 播放 的 状态 时 ， 上 述 匿名 函数 就 会 被 调用 ,使 得 【The video has been loaded "completely", and can 
play now.】， 被 显示 在 浏览 器 的 调试 工具 【Console】 面 板 里 。 
本 示例 会 使 得 浏览 器 在 其 调试 工具 【Console】 面 板 里 ， 分 别 显示 出 如 下 的 信息 : 


The video is being loaded. 

The video's duration has changed. 

The video's meta data has been loaded. 

The video is being downloaded. 

The video's first frame has been loaded. 

The video has been loaded enough to play now. 


The video has been loaded "completely", and can play now. 

由 此 可 知 ， 特 定 视 频 从 远程 服务 器 ， 被 加 载 到 客户 端的 浏览 器 之 前 ， 会 经 过 【开始 进行 加 载 
一 其 持续 时 间 发 生变 化 一 其 元 数据 被 加 载 一 其 主要 数据 开始 被 下 载 一 其 第 1 帧 被 加 载 完成 一 其 数 
据 充 分 被 加 载 并 可 被 播放 一 其 数据 被 加 载 完成 】 等 阶段 。 


12.3.2 ”清空 事件 


在 特定 网 页 里 ,， 特 定 video 或 audio 元 素 实 例 所 对 应 的 视频 或 音频 被 清空 时 ， 会 发 生 清空 
(emptied) 事件 。 请 参看 如 下 示例 。 
【12-3-2-onemptied.html]】 


<!DOCTYPE html> 
<html> 
<head> 
<title>Multimedia related events</title> 
</head> 
<body> 
<video id="video" src="videos/toystory.mp4" type="video/mp4" width="400" controls> 
</video> 


第 
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</body> 
<script> 
video.onemptied = function (event) 


{ 


console.1og('The video has been removed.') ; 


Ee 


setTimeout (() => video.src 
</script> 
</html> 


【相关 说 明 】 


<script> 


“2 2000) 8 


video .onemptied = function (event) 
{ 


console.log('The video\'s playlist has been removed.') ; 


} 


此 语法 将 带 有 参数 event 的 匿名 函数 的 定义 ， 赋 给 


属性 onemptied。 特 定 video 元 素 实例 的 视频 (video) 被 清空 (emptied) 时 ， 


属性 id 的 数据 为 "video' 的 video 元 素 实例 的 
上 述 匿 名 函数 就 会 被 


调用 ， 使 得 【The video's playlist has been removed.】， 被 显示 在 浏览 器 的 调试 工具 【Console】 面 板 


里 。 


SetTimeout(() => video.src = '', 2000) ; 


此 语法 设置 了 在 2000 毫秒 (2 秒 ) 之 后 ， 调 用 箭头 函数 【() => video.src ="】， 使 得 在 属性 id 


的 数据 为 'video' 的 video 元 素 实例 中 ， 其 属性 src 的 数据 
元 素 实例 所 对 应 的 视频 ， 被 清空 而 触发 清空 (emptied) 


vE 2 


汕 工 


12.3.3 ”播放 结束 事件 


， 被 设置 为 空 字符 "， 进 而 等 同 于 这 个 video 
事件 。 


在 特定 网 页 里 ， 特 定 video 或 audio 元 素 实例 对 应 的 视频 或 音频 ， 已 经 被 播放 完成 时 ， 会 发 生 


播放 结束 (ended) 事件 。 请 参看 如 下 示例 。 
【12-3-3-onended.html]】 


<!DOCTYPE html> 
<html> 
<head> 
<title>Multimedia related events</title> 
</head> 
<body> 


<video id="video" src="videos/toystory.mp4" type="video/mp4" width="400" controls> 


</video> 
</body> 
<script> 
video.onended = function (event) 


{ 


console.log('The video has fully played.') ; 


J 
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【相关 说 明 】 


此 语法 将 带 有 参数 event 的 匿名 函数 的 定义 ， 赋 给 属性 id 的 数据 为 'video' 的 video 元 素 实例 的 
属性 onended。 特 定 video 元 素 实例 的 视频 (video) ， 被 播放 到 结束 (ended) 的 位 置 时 ， 上 述 匿名 
函数 就 会 被 调用 ， 使 得 【The video has fully played.】， 被 显示 在 浏览 器 的 调试 工具 【Console】 面 
板 里 。 


12.3.4 “异常 相关 事件 


在 特定 网 页 里 ， 特 定 video 或 audio 元 素 实 例 对 应 的 视频 或 音频 ， 于 加 载 load) 阶段 ， 遇 到 
异常 状况 时 ， 会 发 生 异 常 exception) 相关 事件 。 请 参看 如 下 示例 。 


【12-3-4-exception-events.html] 


【相关 说 明 】 
[ER 
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video.onerror = function (event) 
{ 
console.log('Error occurs.') ; 
3 
此 语法 将 带 有 参数 event 的 匿名 函数 的 定义 ， 赋 给 属性 id 的 数据 为 "video' 的 video 元 素 实例 的 
属性 onerror。 特 定 video 元 素 实例 的 视频 (video) ， 在 加 载 阶段 中 ， 发 生 任何 错误 (error) 时 ， 
上 述 匿名 函数 就 会 被 调用 ， 使 得 【Error occurs.】 被 显示 在 浏览 器 的 调试 工具 【Console】 面 板 里 。 
video.onstalled = function (event) 
{ 
console.log('The data of video is not available.') ; 
2 
此 语法 将 带 有 参数 event 的 匿名 函数 的 定义 ， 赋 给 属性 id 的 数据 为 'video' 的 video 元 素 实例 的 
属性 onstalled。 特 定 video 元 素 实例 的 视频 (video) ， 在 加 载 阶段 中 ， 突 然 停 洁 (stalled) 时 ， 上 
述 匿 名 函数 就 会 被 调用 ， 使 得 【The data of video is not available.】， 被 显示 在 浏览 器 的 调试 工具 
【Console】 面 板 里 。 


Video .onsuspend = function (event) 


{ 


console.log('The data of video is suspended.') ; 
Fg 

此 语法 将 带 有 参数 event 的 匿名 函数 的 定义 ， 赋 给 属性 id 的 数据 为 'video' 的 video 元 素 实例 的 
属性 onsuspend。 特 定 video 元 素 实例 的 视频 (video) ， 在 加 载 阶段 中 ， 突 然 被 停止 (suspended) 
加 载 时 ， 上 述 匿 名 函数 就 会 被 调用 ， 使 得 【The data of video is suspended.】， 被 显示 在 浏览 器 的 调 
试 工具 【Console】 面 板 里 。 

在 本 示例 中 ， 因 为 难以 模拟 【停滞 〈stalled) 】 或 【突然 被 停止 (suspended) 】 的 状态 ， 所 以 
只 能 调试 出 【发 生 错 误 (error) 】 的 状态 。 


12.3.5 ”播放 与 暂停 相关 事件 


在 特定 网 页 里 ， 特 定 video 或 audio 元 素 实例 对 应 的 视频 或 音频 ， 被 播放 与 暂停 时 ， 会 发 生 播 
放 (play) 与 暂停 (pause) 相关 事件 。 请 参看 如 下 示例 。 
【12-3-5-play-and-pause-events.html】 


<!DOCTYPE html> 
<html> 
<head> 
<title>Multimedia related events</title> 
</head> 
<body> 
<video id="video" src="videos/toystory.mp4" type="video/mp4" width="400" controls> 
</video> 
</body> 
<script> 
video.onpause = function (event) 
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{ 
console.log('The video is paused.') ; 
} 


video.onplay = function (event) 
{ 
console.1log('The video is starting.') ; 


六 


video.onplaying = function (event) 
{ 
console.log('The video is restarting after paused.') ; 
Lm 
</script> 
</html> 


【相关 说 明 】 


<script> 


video .onpause = function (event) 


{ 


console.log('The video is paused.') ; 
HR 

此 语法 将 带 有 参数 event 的 匿名 函数 的 定义 ， 赋 给 属性 id 的 数据 为 'video' 的 video 元 素 实例 的 
属性 onpause。 特 定 video 元 素 实例 的 视频 (video) ， 被 暂停 (pause) 时 ， 上 述 匿名 函数 就 会 被 调 
用 ， 使 得 【The video is paused.】， 被 显示 在 浏览 器 的 调试 工具 【Console】 面 板 里 。 

video.onplay = function (event) 
{ 

console.log('The video is starting.') ; 
} 

此 语法 将 带 有 参数 event 的 匿名 函数 的 定义 ， 赋 给 属性 id 的 数据 为 "video' 的 video 元 素 实例 的 
属性 onplay。 特 定 video 元 素 实例 的 视频 (video) ， 被 播放 (play) 时 ， 上 述 匿 名 函数 就 会 被 调用 ， 
生得 【The video is starting.】， 被 显示 在 浏览 器 的 调试 工具 【Console】 面 板 里 。 

Video .onplaying = function (event) 


{ 


console.log('The video is restarting after paused.') ; 
et 


此 语法 将 带 有 参数 event 的 匿名 函数 的 定义 ， 赋 给 属性 id 的 数据 为 'video' 的 video 元 素 实例 的 
属性 onplaying。 特 定 video 元 素 实 例 的 视频 (video) ， 从 暂停 状态 ， 重 新 被 播放 (playing) 时 ， 
上 述 匿 名 函数 就 会 被 调用 ， 使 得 【The video is restarting after paused.】， 被 显示 在 浏览 器 的 调试 工 
具 【Console】 面 板 里 。 


12.3.6 ”播放 速率 变化 事件 


在 特定 网 页 里 ， 特 定 video 或 audio 元 素 实例 对 应 的 视频 或 音频 的 播放 速率 (playback rate) ， 
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被 变更 时 ， 会 发 生 播放 速率 变化 (rate change) 事件 。 请 参看 如 下 示例 。 
【12-3-6-onratechange.html] 


<!DOCTYPE html> 
<htm1> 
<head> 
<title>Multimedia related events</title> 
</head> 
<body> 
<video id="video" src="videos/toystory.mp4" type="video/mp4" width="400" controls autoplay> 
</video> 
</body> 
<script> 
video.onratechange = function (event) 
{ 
console.1og('The video\'s rate has been changed.') ; 
] 


setTimeout (() => video.playbackRate = 2，2000) : 
</script> 
</html> 


【相关 说 明 】 


<script> 


video .onratechange = function (event) 
{ 
console.log('The video\'s rate has been changed.') ; 
EF 
此 语法 将 带 有 参数 event 的 匿名 函数 的 定义 ， 赋 给 属性 id 的 数据 为 'video' 的 video 元 素 实例 的 

属性 onratechange。 特 定 video 元 素 实例 的 视频 (video) 的 播放 速率 (rate) ， 被 变更 (change) 时 ， 
上 述 匿 名 函数 就 会 被 调用 ， 使 得 【The video's rate has been changed.】， 被 显示 在 浏览 器 的 调试 工具 
【Console】 面 板 里 。 


setTimeout(() => video.playbackRate = 2, 2000) ; 


此 语句 设置 了 2000 毫秒 (2 秒 ) 之 后 ， 调 用 箭头 函数 【() => video.playbackRate = 2】， 进 而 
在 属性 id 的 数据 为 'video' 的 video 元 素 实例 中 , 将 数值 2， 赋 给 其 属性 playbackRate, 意味 着 其 播放 
速率 变更 为 200%。 


12.3.7 ”播放 位 置 变 化 相关 事件 


在 特定 网 页 里 ， 特 定 video 或 audio 元 素 实例 对 应 的 视频 或 音频 的 当前 播放 位 置 (playback 
position) ， 被 变更 时 ， 就 会 发 生 播 放 位 置 变 化 〈playback position changed) 相关 事件 。 请 参看 如 下 
示例 。 

【12-3-7-playback-position-changed-events.html}】 


<!DOCTYPE html> 
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<htm1> 
<head> 
<title>Multimedia related events</title> 
</head> 
<body> 
<video id="video" src="videos/toystory.mp4" type="video/mp4" width="400" controls> 
</video> 
</body> 
<script> 
video.onseeked = function (event) 
{ 
console.1og('Another position in the video has been seeked.') ; 
站 
Video.onseeking = function (event) 
{ 
console.1og('RAnother position in the video is seeking.') ; 
video.ontimeupdate = function (event) 
{ 
console.log('The playing position in the video has been changed.') ; 
】 
</script> 
</html> 
【相关 说 明 】 
<script> 


video.onseeked = function (event) 


{ 
console.log('Another position in the video has been seeked.') ; 


Ba 
此 语法 将 带 有 参数 event 的 匿名 函数 的 定义 ， 赋 给 属性 id 的 数据 为 'video' 的 video 元 素 实例 的 
属性 onseeked。 特 定 video 元 素 实例 的 视频 (video) ， 被 用 户 搜索 (seeked) 至 另 一 时 间 点 的 瞬间 ， 
上 述 匿名 函数 就 会 被 调用 ， 使 得 【Another position in the video has been seeked.】， 被 显示 在 浏览 器 
调试 工具 【Console】 面 板 里 。 


video.onseeking = function (event) 


{ 
console.1og('Rnother position in the video is seeking.') ; 


js 
此 语法 将 带 有 参数 event 的 匿名 函数 的 定义 ， 赋 给 属性 id 的 数据 为 'video' 的 video 元 素 实例 的 
属性 onseeking。 特 定 video 元 素 实 例 的 视频 (video) ， 被 用 户 搜 索 (seeking〉 的 瞬间 ， 也 就 是 用 
户 单 击 视频 播放 栏 (playback bar) 的 任意 时 间 位 置 的 瞬间 , 上 述 匿名 函数 就 会 被 调用 , 使 得 [Another 
position in the video is seeking.】， 被 显示 在 浏览 器 的 调试 工具 【Console】 面 板 里 。 


video .ontimeupdate = function (event) 
本 

console.1og('The playing position in the video has been changed.') ; 
拓 光 
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此 语法 将 带 有 参数 event 的 匿名 函数 的 定义 ， 赋 给 属性 id 的 数据 为 "video' 的 video 元 素 实例 的 
属性 ontimeupdate。 特 定 video 元 素 实例 的 视频 (video) 的 播放 时 间 点 ， 持 续 被 播放 或 者 被 手动 变 
更 时 ， 上 述 匿名 函数 就 会 被 调用 ， 使 得 【The playing position in the video has been changed.】， 被 显 
示 在 浏览 器 的 调试 工具 【Console】 面 板 里 。 


12.3.8 音量 变化 事件 


在 特定 网 页 里 ， 特 定 video 或 audio 元 素 实例 对 应 的 视频 或 音频 的 音量 (volume) ， 出 现 变化 
会 发 生 音 量变 化 (volume change) 事件 。 请 参看 如 下 示例 。 


【12-3-8-onvolumechange.html】 


时 


<!DOCTYPE html> 
<html> 
<head> 
<title>Multimedia related events</title> 
</head> 
<body> 
<video id="video" src="videos/toystory.mp4" type="video/mp4" width="400" controls> 
</video> 
</body> 
<script> 
video.onvolumechange = function (event) 
{ 
console.log('The volume of video has been changed.') ; 
Pe 
</script> 
</html> 


【相关 说 明 】 


<script> 


video.onvolumechange = function (event) 
{ 
console.log('The volume of video has been changed.') ; 
汪 
此 语法 将 带 有 参数 event 的 匿名 函数 的 定义 ， 赋 给 属性 id 的 数据 为 'video' 的 video 元 素 实例 的 

属性 onvolumechange。 特 定 video 元 素 实 例 的 视频 (video) 的 音量 (volume) ,被 调整 时 ， 上 述 匿 
名 函数 就 会 被 调用 ， 使 得 【The volume of video has been changed.】， 被 显示 在 浏览 器 的 调试 工具 
【Console】 面 板 里 。 


12.3.9 ”缓冲 等 待 事件 


在 特定 网 页 里 ， 特 定 video 或 audio 元 素 实例 对 应 的 视频 或 音频 ， 加 载 不 完全 而 被 等 待 下 一 帧 
Cnext frame) 的 二 进 制 数据 时 ， 会 发 生 缓冲 等 待 〈waiting) 事件 。 请 参看 如 下 示例 。 
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【12-3-9-onwaiting.html】 


<!DOCTYPE html> 
<htm1> 
<head> 
<title>Multimedia related events</title> 
</head> 
<body> 
<video id="video" src="videos/toystory.mp4" type="video/mp4" width="400" controls> 
</video> 
</body> 
<script> 
video.onwaiting = function (event) 
{ 
console.log('The video is waiting for buffering its next frame.') ; 
J} 
</script> 
</html> 


【相关 说 明 】 


<script> 


video.onwaiting = function (event) 
{ 
console.log('The video is waiting for buffering its next frame.') ; 
ya 
此 语法 将 带 有 参数 event 的 匿名 函数 的 定义 ， 赋 给 属性 id 的 数据 为 'video' 的 video 元 素 实例 的 属性 
onwaiting。 当 特定 video 元 素 实 例 的 视频 (video) ， 处 于 被 等 待 其 下 一 帧 (next frame) 被 加 载 的 状态 
时 ， 上 述 匿 名 函数 就 会 被 调用 ， 使 得 【The video is waiting for buffering its next frame.】， 被 显示 在 浏览 
器 的 调试 工具 【Console】 面 板 里 。 
在 本 示例 中 ， 难 以 模拟 【因为 网 络 连接 问题 ， 而 导致 处 于 等 待 下 一 帧 】 的 状态 ， 所 以 理解 本 
示例 的 工作 原理 即 可 。 


12.4 动画 及 过 渡 事件 


在 特定 网 页 里 的 特定 元 素 实 例 中 ， 被 设置 的 动画 Canimation) 或 过 渡 (transition) 效果 ， 在 播 
放 进程 中 ， 前 后 会 发 生动 画 或 过 渡 效 果 的 相关 事件 。 


12.4.1 动画 相关 事件 


特定 元 素 实例 被 设置 的 动画 ， 在 其 播放 进程 中 ， 前 后 会 发 生动 画 开始 Canimation start) 、 动 
画 结束 (animation end ) 和 动画 迭代 “animation iteration) 的 事件 。 请 参看 如 下 示例 。 
【12-4-1-animation-events.html】 


<!DOCTYPE html> 
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【相关 说 明 】 


这 两 行 CSS 语法 ， 设 置 了 【从 金色 ， 变 成 宝蓝 色 的 文本 颜色 】 的 变换 动画 。 


这 行 CSS 语法 ， 则 设置 了 以 2 秒 的 时 间 ， 重 复 3 次 ， 播 放 名 称 为 text_color 的 上 述 动画 。 
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此 语句 通过 调用 addEventListener(0 函 数 ， 使 得 


着 动画 启动 (animation start) 事件 。 一 旦 作用 于 


属性 id 的 数据 为 div01' 的 div 元 素 实例 ， 被 监听 
属性 id 的 数据 为 'div01 的 div 元 素 实例 的 动画 


(animation) ， 被 启动 (start) 时 ， 显 示 【The animation is starting.】 信 息 的 箭头 函数 ， 就 会 被 调用 。 


div01.addEventListener ('animationend', 


此 语句 通过 调用 addEventListener() 函 数 ， 使 得 


着 动画 结束 (animation end) 事件 。 一 旦 作用 于 


Canimation) ， 已 结束 (end) 时 ， 显 示 【The animation is over.】 信 息 的 箭头 函数 ， 就 会 被 调 月 


div01 .addEventListener ('animationiteration'，() => console.log('The animation is 


iterated.')) ; 


此 语句 通过 调用 addEventListener() 函 数 ， 使 得 


着 动画 迭代 (animation iteration) 事件 。 一 旦 作用 


() => console.log('The animation is over.')) ; 
属性 id 的 数据 为 'div01' 的 div 元 素 实 例 ， 被 监听 
属性 id 的 数据 为 'div01' 的 div 元 素 实例 的 动画 
日 


属性 id 的 数据 为 div01' 的 div 元 素 实例 ， 被 监听 
于 属性 id 的 数据 为 'div01' 的 div 元 素 实例 的 动画 


Canimation) ， 再 次 被 播放 / 迭代 (iterate ) 时 ， 显 示 【The animation is iterated.】 信 息 的 箭头 函数 ， 


就 会 被 调用 。 


12.4.2 ”过 渡 结 束 事件 


特定 元 素 实例 被 设置 的 过 渡 效 果 ， 被 播放 到 结束 时 ， 会 发 生 过 渡 结 束 transition end) 事件 。 


请 参看 如 下 示例 。 


【12-4-2-transition-events.html 


<!DOCTYPE html> 
<htm1> 
<head> 


<title>Multimedia related events</title> 


<style> 
#div01 
{ 
font-size: 2em ; 
width: 100px ; 
height: 100px ; 
border-radius: Spx ; 
background-color: GoldenRod ; 
transition: transform 2s ; 
position: relative ; 
left: 50px ; 
top: S50px ; 
} 


#div01:hover 
下 
transform: rotate(360deg) ; 
} 
</style> 
</head> 
<body> 
<div id="div01"></div> 
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</body> 
<script> 
div01.addEventListener('transitionend', () => console.log('The transition is over.')) ; 
</script> 
</html> 


【相关 说 明 】 


<style> 

#div01 

{ 
font-size: 2em ; 
width: 100px ; 
height: 100px ; 
border-radius: 5px ; 
background-color: GoldenRod ; 


transition: transform 2s ; 
这 行 CSS 语法 ， 设 置 了 2 秒 的 过 渡 (transition〉 特 效 。 


position: relative ; 
left: 50px ; 

top: S50px ; 
} 


#div01:hover 
{ 


transform: rotate(360deg) ; 
这 行 CSS 语法 ， 设 置 了 过 渡 特 效 为 【 当 鼠 标 指针 被 移入 (hover) 其 属性 id 的 数据 为 'div01' 的 
元 素 实 例 的 范围 内 时 ， 将 这 个 元 素 实例 ， 旋 转 360 度 】。 
} 


<script> 
div01.addEventListener('transitionend', () => console.log('The transition is over.')) 
此 语句 通过 调用 addEventListener(0) 函 数 , 使 得 属性 id 的 数据 为 'div01' 的 div 元 素 实 例 ， 被 监听 
着 过 渡 结 束 (transition end) 事件 。 一旦 作用 于 属性 id 的 数据 为 'div01' 的 div 元 素 实例 的 过 渡 特 效 
已 结束 (end) 时 ， 显 示 【The transition is over.】 信 息 的 箭头 函数 ， 就 会 被 调用 。 


12.5 其 他 事件 


本 节 将 提 及 details 元 素 实 例 的 切换 事件 、 鼠 标 滚 轮 (mouse wheel) 事件 、 触 摸 (touch) 相关 
事件 ， 以 及 接收 服务 器 数据 (receiving server data) 相关 事件 。 
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12.5.1 details 元 素 实例 的 切换 事件 


在 特定 网 页 里 ， 特 定 details 元 素 实 例 ， 被 展开 或 折叠 时 ， 会 发 生 切 换 (toggle〉 事 件 。 请 参看 
如 下 示例 。 
【12-5-1-ontoggle.html] 


【相关 说 明 】 


此 语法 将 带 有 参数 event 的 匿名 函数 的 定义 ， 赋 给 属性 id 的 数据 为 'details01' 的 details 元 素 实 
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例 的 属性 ontoggle。 特 定 details 元 素 实例 的 内 容 ， 被 展开 或 折 倒 时， 上述 匿 名 函数 就 会 被 调用 ， 使 
得 【Block of the article is toggled to open/close.】， 被 显示 在 浏览 器 的 调试 工具 【Console】 面 板 里 。 


12.5.2 ”鼠标 滚轮 事件 


在 特定 网 页 里 ， 通 过 鼠标 滚轮 (mouse wheel) ， 使 得 特定 元 素 实 例 中 的 内 容 ， 被 滚动 时 ， 会 
发 生 鼠 标 滚轮 事件 。 请 参看 如 下 示例 。 
【12-5-2-onwheel.html】 


<!DOCTYPE html> 
<html> 
<head> 
<title>Touch related events</title> 
<style> 
#div01 
{ 
/*width: 400px ;* 
/*height: 400px ;*/ 
Color: RoyalBlue ; 
border-radius: 5px ; 
font-size: 2em; 
} 
</style> 
</head> 
<body> 
<div id="div01"> 
<p>Curcumin is a bright yellow chemical produced by some plants. It is the principal curcuminoid 
of turmeric (Curcuma longa), a member of the ginger family, Zingiberaceae.It is sold 
as an herbal supplement, cosmetics ingredient, food flavoring, and food coloring.</p> 
<p>Chemically, curcumin is a diarylheptanoid, belonging to the group of curcuminoids, which 
are natural phenols responsible for turmeric's yellow color. It isa tautomeric compound 
existing in enolic form in organic solvents, and as a keto form in water.</p> 
<p>Although thoroughly studied in laboratory and clinical studies, curcumin has no confirmed 
medical uses, and has proved frustrating to scientists who state that it is unstable, not 
bioavailable, and unlikely to produce useful leads for drug development.</p> 
</div> 
</body> 
<script> 
// div01.onmousewheel = function (event) 
div01.onwheel = function (event) 
{ 
console.1og('Block of the article is scrolled by mouse wheel.') ; 
A 
</script> 
</html> 


【相关 说 明 】 


<script> 
// div01.onmousewheel = function (event) 
div01 .onwheel = function (event) 
{ 
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console.1og ('Block of the article is scrolled by mouse wheel.') ; 
} 3 
此 语句 将 带 有 参数 event 的 匿名 函数 的 定义 ， 赋 给 属性 id 的 数据 为 div01' 的 div 元 素 实例 的 属 
性 onwheel。 特 定 div 元 素 实例 的 内 容 ， 通 过 鼠标 滚轮 ， 被 加 以 滚动 时 ， 上 述 匿名 函数 就 会 被 调 上 
使 得 【Block of the article is scrolled by mouse wheel.】， 被 显示 在 浏览 器 的 调试 工具 【Console】 面 
板 里 。 


12.5.3 ”触摸 相关 事件 


在 触摸 屏 (touch screen〉 中 的 特定 网 页 里 ， 特 定 元 素 实例 被 触摸 时 ， 会 发生 触摸 (touch) 相 
关 事 件 ， 例 如 触摸 开始 (touch start) 事件 、 触 摸 结束 (touch end) 事件 、 触 摸 移 动 (touch move) 
事件 ， 以 及 触摸 撤销 (touch cancel) 事件 。 请 参看 如 下 示例 。 

【12-5-3-touch-events.html]】 


<!DOCTYPE html> 


<html> 
<head> 
<title>Touch related events</title> 
<style> 
#qiv01 
{ 
width: 400px ; 
height: 400px ; 
color: RoyalBlue ; 
text-align: center ; 
border-radius: 5px ; 
background-color: Gold ; 
} 
</style> 
</head> 
<body> 
<div id="div01">Block 1</div> 
</body> 
<script> 


div01.ontouchstart = function (event) 
{ 

console.1og('Block is pressed.') ; 
车 们 


div01.ontouchend = function (event) 
{ 

console.1og('Block is released.') ; 
}】 


div01 .ontouchmove = function (event) 
{ 

console.1log('Touch point is moving.') ; 
} 


第 12 章 DOM 的 事件 处 理 ( 二 ) | 343 


div01.ontouchcancel = function (event) 
{ 
console.1log('Touch point is changed.') ; 
Fe 
</script> 
</html> 


【相关 说 明 】 


<script> 


div01.ontouchstart = function (event) 
4 
console.1og('Block is pressed.') ; 
2, 
此 语法 将 带 有 参数 event 的 匿名 函数 的 定义 ， 赋 给 属性 id 的 数据 为 'div01' 的 div 元 素 实例 的 属 
性 ontouchstart。 特定 div 元 素 实例 被 触摸 (touch start) 时 ， 上 述 匿名 函数 就 会 被 调用 ， 使 得 【Block 
is pressed.】， 被 显示 在 浏览 器 的 调试 工具 【Console】 面 板 里 。 
若 读 者 欲 在 台式 电脑 和 笔记 本 电脑 ， 通 过 鼠标 的 点 击 ， 摸 拟 被 触摸 的 动作 ， 则 可 借助 浏览 器 
的 调试 工具 来 完成 。 以 Google Chrome 浏览 器 为 例 ， 可 执行 如 下 步骤 : 
在 窗口 中 ， 浏 览 此 示例 文档 。 
按 下 快捷 键 Ctrl + Shift + TI， 以 启动 调试 工具 的 【Console】 面 板 。 
务必 单 击 【Console】 面板 一 次 ， 再 按 下 快捷 键 Ctrl + Shift+ M， 以 切换 至 【移动 设备 】 的 模拟 状态 。 
此 时 ， 必 须 按 快捷 键 F5 或 者 Ctrl +R， 重 新 加 载 此 示例 文档 ! 
接着 ， 通 过 鼠标 单 击 的 动作 ， 即 可 在 移动 设备 里 ， 模 拟 出 上 述 div 元 素 实 例 被 触摸 (touch ) 
的 动作 。 


div01.ontouchend = function (event) 
{ 
console.log('Block is released.') ; 

和 

此 语法 将 带 有 参数 event 的 匿名 函数 的 定义 ， 赋 给 属性 id 的 数据 为 'div01' 的 div 元 素 实例 的 属 
性 ontouchend。 特 定 div 元 素 实例 ， 被 触摸 已 结束 (touch end) 时 ， 上 述 匿 名 函数 就 会 被 调用 ， 使 
得 【Block is released.】， 被 显示 在 浏览 器 的 调试 工具 【Console】 面 板 里 。 其 中 ， 所 谓 的 被 触摸 已 
结束 ， 即 是 指 用 户 的 手指 离开 触摸 屏 。 


div01.ontouchmove = function (event) 
{ 
console.1log (Touch point is moving.') ; 
> 
此 语法 将 带 有 参数 event 的 匿名 函数 的 定义 ， 赋 给 属性 id 的 数据 为 'div01' 的 div 元 素 实例 的 属 

性 ontouchmove。 特 定 div 元 素 实例 正在 被 触摸 ， 并 且 其 触摸 点 仍然 在 移动 时 ， 就 会 持续 调用 上 述 
匿名 函数 ， 使 得 【Touch point is moving.】， 被 持续 显示 在 浏览 器 的 调试 工具 【Console】 面 板 里 。 
其 中 ， 所 谓 的 触摸 点 仍然 在 移动 ， 即 是 指 用 户 的 手指 ， 持 续 在 触摸 屏 上 滑动 。 


div01 .ontouchcancel = function (event) 


344 Javascript 编程 思想 : 从 ES5 到 ES9 


{ 
console.log('Touch point is changed.') ; 

此 语句 将 带 有 参数 event 的 匿名 函数 的 定义 ， 赋 给 属性 id 的 数据 为 'div01' 的 div 元 素 实例 的 属 
性 ontouchcancel。 在 特定 div 元 素 实例 中 , 若 已 经 存在 一 个 触摸 点 , 却 又 出 现 另 一 个 新 的 触摸 点 时 ， 
上 述 匿名 函数 就 会 被 调用 ,使 得 【Touch point is changed.】, 被 显示 在 浏览 器 的 调试 工具 【Console】 
面板 里 。 
所 谓 的 已 经 存在 一 个 触摸 点 , 却 又 出 现 另 一 个 新 的 触摸 点 , 就 是 指 用 户 在 div 元 素 实例 的 范围 
和 ， 前 后 不 止 放 入 一 根 手 指 。 也 因此 ， 这 个 动作 的 调试 ， 无 法 在 触摸 屏 以 外 的 屏幕 上 进行 。 


12.5.4 ”接收 服务 器 数据 相关 事件 


在 特定 网 页 里 的 script 元 素 实 例 中 ， 可 编写 访问 EventSource 对 象 实例 的 源 代 码 ， 让 浏览 器 通 
过 EventSource 对 象 实例 ， 创 建 【 至 特定 网 站 服务 器 的 特定 网 址 】 的 连接 ， 以 便 接 收 来 自 特 定 网 站 
服务 器 的 信息 (message) 数据 。 
每 次 接收 到 来 自 特定 网 站 服务 器 的 信息 数据 时 ， 都 会 发 生 接 收服 务 器 数据 (receiving server 
data) 相关 事件 ， 例 如 错误 (error) 事件 、 接 收 信息 (message) 事件 和 连接 敞开 (open) 事件 。 请 
参看 如 下 带 有 两 个 源 代码 文档 的 示例 。 

【12-5-4-receiving-server-data-events.html】 


<!DOCTYPE html> 
<html> 
<head> 
<title>Server-sent events</title> 
</head> 
<body> 
</body> 
<script> 
let source = new EventSource('6-9-4-receiving-server-data-testing.php') ; 


source.onopen = function (event) 
{ 
console.1og('Connection to the server is established.') ; 


} 


source.onmessage = function (event) 

{ 
console.10g('A signal from the server is received.') ; 
console.log (event .data) ; 

让 


source.onerror = function (event) 
{ 
console.1log('An error occurs.'); 
这 
</script> 
</html> 
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【相关 说 明 】 


<script> 


let source = new EventSource('6-9-4-receiving-server-data-testing.php') ; 


此 语句 声明 了 变量 source， 其 初始 数据 为 可 访问 特定 网 站 服务 器 端的 PHP 源 代码 文档 
12-5-4-receiving-server-data-testing.php 的 EventSource 对 象 实例 。 变量 source 的 EventSource 对 象 实 
例 ， 可 通过 HTTP 协议 来 ， 接 收 特定 网 站 服务 器 端 所 发 送 的 数据 。 

请 留意 ， 本 示例 只 能 正常 运作 于 支持 HTTP 协议 的 网 站 服务 器 网 址 ， 例 如 
http://localhost/12-5-4-receiving-server-data-testing.php。 直 接 通 过 浏览 器 打开 file:///D:/works/books/ 
publishers/ 示 例文 档 /html/12-5-4-receiving-server-data-testing.php， 是 无 法 使 得 本 示例 正常 运作 的 。 

source.onopen = function (event) 
{ 


console.1og('Connection to the server is established.') ; 
} 


此 语法 将 带 有 参数 event 的 匿名 函数 的 定义 ， 赋 给 变量 source 的 EventSource 对 象 实例 的 属性 
onopen 。 当 EventSource 对 象 实例 被 浏览 器 启动 之 后 ， 以 连接 到 网 站 服务 器 的 PHP 源 代码 
12-5-4-receiving-server-data-testing.php 时 ， 上 述 匿 名 函数 就 会 被 调用 , 使 得 【Connection to the server 
is established.】， 被 显示 在 浏览 器 的 调试 工具 【Console】 面 板 里 。 

source.onmessage = function (event) 

console.1og('R signal from the server is received.') ; 
console.1og (event .data) ; 

) 

此 语法 将 带 有 参数 event 的 匿名 函数 的 定义 ， 赋 给 变量 source 的 EventSource 对 象 实例 的 属性 
onmessage。 当 EventSource 对 象 实例 接收 到 【网 站 服务 器 解析 PHP 源 代 码 12-5-4-receiving-server- 
data-testing.php 】 之 后 的 返回 数据 时 ， 上 述 匿 名 函数 就 会 被 调用 ， 使 得 【A signal from the server is 
received.】 和 【 current number = XX】 的 信息 ,分 别 被 显示 在 浏览 器 的 调试 工具 【Console】 面 板 里 。 
其 中 ，【current number = XX】 是 来 自 于 网 站 服务 器 端 ， 并 且 由 event.data 所 返回 的 字符 串 信 息 。 

source.onerror = function (event) 
{ 


console.1og('Rn error occurs.') ; 
a 2 


此 语法 将 带 有 参数 event 的 匿名 函数 的 定义 ， 赋 给 变量 source 的 EventSource 对 象 实例 的 属性 
onerror。 当 浏览 器 对 网 站 服务 器 的 PHP 源 代码 文档 12-5-4-receiving-server-data-testing.php 的 连接 ， 
被 中 断 时 , 上 述 匿名 函数 就 会 被 调用 , 使 得 [ An error occurs.】, 被 显示 在 浏览 器 的 调试 工具 [Console】 
面板 里 。 

【12-5-4-receiving-server-data-testing.php】 


<?php 
header ('Content-Type: text/event-stream') ; 


Snumber = rand(1, 100) ; 
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echo "data: current number = $number\n\n™" ; 


flush(); 
?> 


【相关 说 明 】 
<?php 
header ('Content-Type: text/event-stream') ; 
通过 此 语句 ， 网 站 服务 器 可 发 送 事件 流 (event stream)。 所 谓 的 事件 流 ， 是 指定 时 
端的 信息 数据 。 
Snumber = rand(1, 100) ; 
此 语句 会 动态 产生 1~ 100 之 间 的 随机 整数 值 。 
echo "data: current number = $number\n\n" ; 
此 语句 的 返回 数据 ， 是 被 用 来 定时 回复 至 客户 端的 信息 数据 ， 例 如 "data: current number = 
24\n\n"。 在 此 ， 用 来 表示 回复 用 途 的 开头 字符 串 "data:” 及 其 末尾 的 字符 串 \nn"， 都 是 必要 的 ! 
flush(); 


此 语句 将 上 述 信息 数据 ， 尽 量 即时 地 传送 到 客户 端 ， 以 尽快 显示 到 其 浏览 器 窗口 中 。 


12.6 练 习 题 


加 


复 至 客户 


1. 试 编写 JavaScript 源 代码 ， 以 显示 出 用 户 在 特定 网 页 上 ， 从 拖 动 特定 元 素 实例 开始 ， 至 拖 
动 结束 为 止 , 以 像素 (pixel) 为 计量 单位 的 拖 动 距离 .( 提 示 : DragEvent.clientX 和 DragEvent.clientY 。) 

2. 试 编写 JavaScript 源 代码 ， 使 得 在 当前 网 页 中 ,其 属性 id 的 数据 为 'video' 的 影片 实例 ， 被 暂 
停 播放 时 ， 显 示 出 带 有 特定 信息 的 div 元 素 实例 ; 而 影片 被 继续 播放 时 ， 则 隐藏 这 个 div 元 素 实例 。 

3. 试 编写 JavaScript 源 代码 ， 以 便 在 当前 网 页 中 ， 显 示 出 用 户 在 5 秒 钟 之 内 ， 点 击 鼠 标 左 键 
的 次 数 、 输 入 字符 的 个 数 ， 以 及 滚动 鼠标 滚轮 的 总 刻度 。 


第 13 章 
Reflect 对 象 


本 章 内 容 主要 介绍 Reflect 对 象 的 多 个 函数 的 运用 ， 以 利于 编程 人 员 在 特定 自 定义 的 对 象 实例 
中 ， 更 加 细腻 地 对 其 各 个 属性 ， 进 行 创 建 、 定 义 、 删 除 、 获 取 、 判 断 和 列举 等 访问 的 动作 。 


13.1 Reflect 对象 介绍 (ES6 ) 


Reflect 对 象 实例 的 内 置 函 数 ， 可 用 来 替代 或 简化 【访问 Object 对 象 实例 的 属性 (property) 】 
的 相关 语法 。 请 参看 如 下 示例 。 
【13-1-^-Reflect-objectjs]】 


let candy amount = {durian: 30, strawberry: 55, cranberry: 10, blueberry: 13, cherry: 60, orange: 
18, lemon: 10} ; 


Object.defineProperty (candy amount,'apple', {value: 17, writable: true, enumerable: true, 
configurable: true}) ; 


candy amount.watermelon = 33 ; 
let symbol01 = Symbol('mixed') ; 
candy amount[symbo101] = 5; 


console.1log (Reflect .ownKeys (candy amount)) ; 
console.10g('') ; 


console.log(candy amount .orange) ; 
console.10g (candy amount .watermelon) ; 


console.10g('') ; 


console.log (candy amount.mixed) ; 
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console.1log (candy amount['mixed']) ; 
console.log('') ; 


console.log(candy amount [symbo101]) ; 


【相关 说 明 】 


let candy amount = {durian: 30, strawberry: 55, cranberry: 10, blueberry: 13, cherry: 60, orange: 
18, lemon: 10} ; 


声明 初始 数据 为 对 象 实例 的 变量 candy_amount。 


Object.defineProperty (candy amount,'apple', {value: 17, writable: true, enumerable: true, 
configurable: true}) ; 


此 语句 通过 内 置 函 数 Object.definePreperty()， 在 变量 candy_amount 的 对 象 实例 中 ， 新 增 初 始 
数值 为 17 的 属性 apple， 并 设置 其 可 再 次 被 写 入 (writable》、 可 被 迭代 / 列举 (enumerable) 和 
可 再 次 被 配置 (configurable〉 的 特征 。 

candy_amount.watermelon = 33 ; 

此 语句 将 整数 值 33， 赋 给 变量 candy_amount 对 象 实例 的 属性 watermelon。 

let symbol01 = Symbol('mixed') ; 

此 语句 声明 了 变量 symbol01， 其 初始 数据 为 内 含 字符 串 'mixed' 的 Symbol 对 象 实例 ， 使 得 变量 
名 称 symbol01 等 价 于 Symbol(mixed)， 可 作为 特定 对 象 实例 的 新 属性 的 标识 符 〈identifier) 。 

candy amount[symbo101] = 5 

此 语句 将 整数 值 5， 赋 给 变量 candy_amount 对 象 实例 中 的 标识 符 为 【Symbol(mixed")】 的 新 属 
性 。 在 此 ， 通 过 变量 名 称 symbol01， 来 代表 新 属性 的 标识 符 【Symbol(mixed)】。 换 言 之 ， 
【candy amount[symbol01] = 5 ;】 等 价 于 【candy_amount[Symbol(mixed)]=5;】。 


console.log (Reflect .ownKeys (candy amount)) ; 


通过 内 置 函数 Reflect.ownKeys()， 可 使 得 变量 candy_amount 的 对 象 实例 中 的 各 个 新 属性 ， 组 
成 新 数组 实例 ["durian", "strawberry", "cranberry", "blueberry", "cherry", "orange", "lemon", "apple", 


» 


"watermelon", Symbol(mixed)]。 


console.log(candy amount .orange) ; 


candy_amount.orange 当前 会 返回 整数 值 18。 


console.10g('') ; 


console.log (candy amount .watermelon) ; 


candy_amount.watermelon 当前 会 返回 整数 值 33。 


console.1log('') ; 


console.log (candy amount .mixed) ; 
console.log (candy amount ['mixed']) ; 


candy_amount.mixed 或 candy amount['mixed] 当前 均 会 返回 undefined ， 代 表 在 变量 
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candy_amount 的 对 象 实例 中 ， 并 不 存在 属性 mixed。 


console.10g('') ; 


console.log (candy amount [symbo101]) ; 


candy_amount[symbol01] 当 前 会 返回 整数 值 5， 代 表 在 变量 candy_amount 的 对 象 实例 中 ， 存 在 


标识 符 为 Symbol(mixed) 的 属性 。 


13.2 ”间接 应 用 特定 函数 (ES6 ) 


通过 函数 Reflect.apply()， 可 传 入 多 个 数据 ， 至 即将 被 间接 应 用 的 其 他 函数 。 
【13-2-^-Reflectrapply.js】 


let code list = [108，111，118，101，32，121，111，117] ; 


result = String.fromCharCode(... code list) ; 
console.log(result) ; 


result = Reflect.apply (String.fromCharCode, undefined, code list) ; 
console.log(result) ; 


let pointer = null ; 
let range list = [10, 10, 10, 50, 50, 50, 100, 100, 100] ; 


function generate(... list) 


{ 
let number list = [] ; 


console.log (this.valueOf()) ; 
for (let i = 0; i < list.length; i++) 
{ 
number list.push (ParseInt (list[i]* Math.random())) ; 
} 
return number list ; 


result = Reflect.apply (generate, 'test message', range list) ; 
console.log (result) ; 


【相关 说 明 】 
let code list = [108, 111, 118, 101, 32, 121, 111, 117] ; 
声明 初始 数据 为 内 含 多 个 整数 值 的 数组 实例 的 变量 code_list。 


result = String.fromCharCode(... code list) ; 


此 语句 将 字符 串 'love you'， 赋 给 变量 result。 其 中 ， 语 法 【String.fromCharCode( 


请 参看 如 下 示例 。 


.… Code_list)】 等 价 
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于 语法 【String.fromCharCode(... [108，111，118，101, 32，121, 111, 117])】， 最 后 也 等 同 于 语法 
【String.fromCharCode(108, 111, 118, 101, 32, 121, 111, 117)】， 均 会 返回 各 数码 所 对 应 的 字符 小 
(108) 、'o C111) 、V (118) 、e (101) 、" (32) 、Y (121) 、o (111) 与 Ww (117) ， 并 组 
成 新 的 字符 串 'love you'。 


console.log(result) ; 


result = Reflect .apply (String.fromCharCode, undefined, code list) ; 


【 Reflect.apply(String.fromCharCode，undefined，code list)】 等 同 于 【 String.fromCharCode(... 
code list)】。 若 是 【String.fromCharCode(... code_list)】 可 被 改写 成 为 【其 数据 为 字符 串 的 变量 名 
称 .fromCharCode(... code_ list)】， 则 【Reflect.apply(String.fromCharCode, undefined, code list)】 可 
被 改写 成 为 【Reflect.apply(fromCharCode， 其 数据 为 字符 串 的 变量 名 称 , code_list)】。 

可 惜 的 是 ， 函 数 String.fromCharCode() 并 不 能 被 改 成 为 【其 数据 为 字符 串 的 变量 名 
称 .fromCharCode()】， 所 以 【Reflect.apply(String.fromCharCode, undefined, code_list)】 中 的 第 2 个 
参数 的 数据 必须 是 undefined。 


console.log (result) ; 

let pointer = null ; 

声明 初始 数据 为 空 值 Cnull) 的 变量 pointer。 

let range list = [10, 10, 10, 50, 50, 50, 100, 100, 100] ; 
声明 初始 数据 为 内 含 多 个 整数 值 的 数组 实例 的 变量 range_list。 


function generatel(... list) 
{ 


let number list = [] ; 
声明 初始 数据 为 空 数组 实例 的 局 部 变量 number list。 


console.1log (this.valueOf()) ; 


this.valueOf0) 当 前 会 返回 字符 串 'test message'。 
for (let i = 0; i < list.length; i++) 

依据 参数 list 的 数组 实例 中 的 元 素 个 数 9， 此 for 循环 语句 会 迭代 9 次 。 
A 


number list.push (parseInt (list[i]* Math.random())) ; 


此 语句 分 别 将 参数 list 的 数组 实例 中 的 各 整数 值 ， 作 为 不 同 的 上 限 值 ， 以 新 增 【0 ~ 上 限 值 】 
的 随机 整数 值 ， 至 变量 number_list 的 数组 实例 中 。 
} 


return number list ; 


此 语句 会 返回 变量 number_list 所 代表 的 【被 新 增 9 个 整数 值 ] 的 数组 实例 ,例如 [0, 4, 6, 49, 24， 
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13, 62, 54, 75]。 

} 

上 述 语法 定义 了 函数 generate0)， 并 用 来 返回 内 含 9 个 整数 值 的 新 数组 实例 。 其 中 ， 每 个 整数 
值 均 大 于 或 等 于 0; 而 且 ， 小 于 10、 小 于 50 和 小 于 100 的 整数 值 ， 各 有 3 个 ， 例 如 [0, 4, 6, 49, 24， 
13, 62, 54, 75]。 在 上 述 函 数 内 部 ， 变 量 range_list 的 数组 实例 [10, 10, 10, 50, 50, 50, 100, 100, 100] 中 
的 各 整数 值 ， 在 被 返回 的 新 数组 实例 (例如 [0, 4, 6, 49, 24, 13, 62, 54, 75]) 中 ， 被 视 为 不 同 的 上 限 
值 。 


result = Reflect .apply (generate,'test message', range list) ; 

此 语句 将 【间接 被 调用 的 函数 generate0 所 返回 】 的 新 数组 实例 (例如 [0, 4, 6, 49, 24, 13, 62, 54， 
75]) ， 赋 给 变量 result。 此 语句 可 使 得 字符 串 'test message'， 成 为 在 名 称 为 generate 的 函数 内 部 ， 
其 内 置 的 局 部 变量 this 的 数据 ,并 可 将 变量 range_list 的 数组 实例 [10, 10, 10, 50, 50, 50, 100, 100, 100] 
中 的 各 整数 值 ， 作 为 传 入 至 名 称 为 generate 的 函数 的 各 参数 数据 ， 如 同 【generate(..…. range_list)】 被 
调用 一 样 。 

result = generate(... range list) ; 

除了 作为 函数 Reflect.apply(0) 的 第 2 个 参数 数据 'test message' 之 外 ， 此 语句 几乎 等 价 于 【result= 


Reflect.apply(generate,'test message', range_list) ;】 。 


13.3 ”创建 特定 对 象 的 实例 (ES6 ) 


通过 函数 Reflect.construct()， 可 传 入 多 个 数据 ， 至 即将 被 间接 调用 的 其 他 对 象 的 构造 函数 里 ， 
进而 创建 特定 对 象 的 新 实例 。 请 参看 如 下 示例 。 


【13-3-^-Reflect-constructjs】 


let a01 = new Rrray(7) ; 
let a02 = Reflect.construct (Array, [7]) ; 


console.1log(a01) ; 
console.1log(a02) ; 
console.1og('') ; 


MAA 
let d01 = new Date() ; 
let d02 = Reflect.construct (Date, []) ; 


console.10g(d01) ; 
console.10g(d02) ; 
console.1log('') 


MAA 
let n01 = new Number(2591.8) ; 
let n02 = Reflect.construct (Number, [2591.8]) ; 


352 


JavaScript 编程 思想 : 从 ES5 到 ES9 


console.log(n01) ; 
console.log(n02) ; 
console.10g('') 


【相关 说 明 】 


let a01 = new Array(7) ; 
let a02 = Reflect.construct (Array, [7]) ; 


在 这 两 个 语句 里 ，【new Array(7)】 和 【Reflect.construct(Array, [7])】 是 等 价 的 ， 会 使 得 变量 
a01 与 a02 的 初始 数据 ， 均 成 为 可 容纳 7 个 元 素 的 数组 实例 。 其 中 ,语法 【[7]】 中 的 整数 值 7， 被 
视 为 传 入 Array 对 象 的 构造 函数 Array(7) 中 的 参数 数据 。 


console.log(a01) ; 
console.1log(a02) ; 


这 两 个 语句 均 显 示 出 【(7)[empty X 7]】 的 信息 。 
console.1og('') ; 


let d01 = new Date() ; 
let d02 = Reflect.construct (Date, []); 


在 这 两 个 语句 中 ，【new Date()】 和 【Reflect.construct(Date, [])】 是 等 价 的 ， 会 使 得 变量 d01 
与 d02 的 初始 数据 ， 均 成 为 内 含 当前 日 期 与 时 间 的 Date 对 象 实例 。 其 中 ，[] 意 味 着 没有 任何 被 传 
入 Date 对 象 的 构造 函数 Date0 中 的 参数 数据 。 


console.log(d01) ; 
console.log(d02) ; 


这 两 个 语句 均 显 示 出 当前 的 日 期 与 时 间 ， 例 如 【Sat Dec 01 2018 23:25:37 GMT+0800 (China 
Standard Time)】。 


console.1log('') ; 


let n01 = new Number(2591.8) ; 
let n02 = Reflect.construct (Number, [2591.8]) ; 


在 这 两 个 语句 中 ，【new Number(2591.8)】 和 【Reflect.construct(Number, [2591.8])】 是 等 价 的 ， 
会 使 得 变量 n01 与 n02 的 初始 数据 ， 均 成 为 内 含 数值 2591.8 的 Number 对 象 实例 。 其 中 ，[2591.8] 
中 的 数值 2591.8， 被 视 为 传 入 Date 对 象 的 构造 函数 Number(2591.8) 的 参数 数据 。 


console.log(n01) ; 
console.log(n02) ; 


这 两 个 语句 均 显示 出 【Number{2591.8} 】 的 信息 。 
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13.4 ”精细 定义 新 属性 (ES6 ) 


通过 函数 Reflect.defineProperty()， 可 间接 对 特定 对 象 的 实例 ， 精 细 定 义 其 新 届 性 及 其 特征 。 
请 参看 如 下 示例 。 

【13-4-^-Reflect-defineProperty.js】 

let obj01 = {}, obj02 = {} ， 


let result01 = null , result02 = null ; 


result01 = Object.defineProperty (obj01, 'name', {value: 'Alex', writable: true, enumerable: 
true, configurable: true}) ; 

result02 = Reflect .defineProperty (obj02, 'name', {value: 'Alex', writable: true, enumerable: 
true, configurable: true}) ; 


console.1log (obj01) ; 
console.1log (obj02) ; 
console.1og('') ; 


console.log(result01) 7 
console.log (result02) ; 


【相关 说 明 】 

let obj01 = {}, obj02 = {}; 

此 语句 分 别 声明 了 初始 数据 均 为 空 对 象 实例 人 的 变量 obj01 与 obj02。 
let result01 = null , result02 = null ; 

此 语句 分 别 声 明了 初始 数据 均 为 空 值 Cnull) 的 变量 result01 与 result02。 


result01 = Object .defineProperty (obj01, 'name', {value: 'Alex', writable: true, enumerable: 
true, configurable: true}) ; 

result02 = Reflect .defineProperty(obj02, 'name', {value: 'Alex', writable: true, enumerable: 
true, configurable: true}) ; 


这 两 个 语句 均 在 变量 obj01 与 obj02 的 空 对 象 实例 中 ， 将 字符 串 'Alex"， 赋 给 新 属性 name。 不 
同 的 是 ， 在 成 功 定义 新 属性 的 情况 下 ， 函 数 Object.defineProperty0 会 返回 新 属性 name 的 对 象 实例 
{name: "Alex"}， 而 函数 Reflect.defineProperty() 则 返回 布尔 值 true。 


console.log(obj0l) ; 
console.1lo0g (obj02) ; 


这 两 个 语句 均 显 示 出 {name: "Alex"} 的 信息 。 
console.10g('') ; 


console.log (result01) ; 


显示 出 fname: "Alex"} 的 信息 。 
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console.log (result02) ; 


显示 出 布尔 值 true 的 信息 。 


13.5 ”删除 特定 属性 (ES6 ) 


通过 函数 Reflect.deleteProperty0， 可 间接 删除 特定 对 象 实例 的 特定 属性 。 请 参看 如 下 示例 。 
【13-5-^-Reflect-deleteProperty.js】 


let inventory = {apple: 10, banana: 18, durian: 8, grapefruit: 30} ; 
let result = null ; 


result = delete inventory.apple ; 


console.log(result) ; 
console.log (inventory) ; 
Console.1log('') ; 


result = Reflect .deleteProperty (inventory, 'grapefruit') ; 


console.log(result) ; 
console.1log (inventory) ; 


【相关 说 明 】 

let inventory = {apple: 10, banana: 18, durian: 8, grapefruit: 30} ; 

声明 初始 数据 为 对 象 实例 的 变量 inventory。 

let result = null ; 

声明 初始 数据 为 空 值 (null) 的 变量 result。 

result = delete inventory.apple ; 

此 语句 将 变量 inventory 的 对 象 实例 中 的 属性 apple， 被 试图 删除 。 若 成 功 删 除 ， 则 返 [E 
true， 并 赋 给 变量 result。 

console.log(result) ; 

显示 出 布尔 值 true 的 信息 。 

console.log (inventory) ; 

此 语句 显示 出 {banana: 18, durian: 8, grapefruit: 30} 的 信息 。 从 中 可 以 看 出 ， 属 性 apple 及 其 数 
值 10， 已 被 成 功 删 除 。 


console.10g('') ; 


布尔 值 


result = Reflect.deleteProperty (inventory, 'grapefruit') ; 


此 语句 通过 函数 Reflect.deleteProperty()， 试 图 删除 变量 inventory 的 对 象 实例 中 的 属性 
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grapefruit。 若 成 功 删 除 ， 则 返回 布尔 值 tue， 并 赋 给 变量 result。 
console.log (result) ; 
显示 出 布尔 值 true 的 信息 。 
console.1og (inventory) ; 


此 语句 显示 出 {banana: 18, durian: 8} 的 信息 。 从 中 可 以 看 出 ， 属 性 grapefruit 及 其 数值 30， 已 
被 成 功 删除 。 


13.6 ”获取 特定 属性 的 数据 ( ES6 ) 


通过 函数 Reflect.get()， 可 间接 获取 特定 对 象 实例 中 的 特定 属性 的 数据 。 请 参看 如 下 示例 。 
【13-6-^-Reflect-getjs】 
let inventory = {apple: 10, banana: 18, durian: 8, grapefruit: 30} ; 


let result = inventory.banana ; 


console.log(result) ; 
console.1log('') ; 


result = Reflect.get (inventory, 'grapefruit') ; 
console.log(result) ; 


【相关 说 明 】 

let inventory = {apple: 10, banana: 18, durian: 8, grapefruit: 30} ; 
声明 初始 数据 为 对 象 实例 的 变量 inventory。 

let result = null ; 

声明 初始 数据 为 空 值 (null〉 的 变量 result。 

result = inventory.banana ; 


inventory.banana 会 返回 在 变量 inventory 的 对 象 实例 中 ， 其 属性 banana 的 数值 18， 并 赋 给 变 


量 result。 


console.log(result) ; 
console.10g('') ; 


result = Reflect.get (inventory, 'grapefruit') ; 


通过 函数 Reflect.get0， 返 回 在 变量 inventory 的 对 象 实例 中 ， 其 属性 grapefruit 的 数值 30， 并 
赋 给 变量 result。 
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13.7 ”返回 特定 属性 的 描述 堪 ( ES8 ) 


通过 函数 Reflect.getOwnPropertyDescriptor()， 可 间接 返回 特定 对 象 实例 的 特定 


(descriptor) 。 请 参看 如 下 示例 。 


【13-7-Reflect-getOwnPropertyDescriptorjs】 


let profile = 
{ 


firstname: 'Jason', 


lastname: 'Alex 
gender: 'male', 
age: 28, 


position: 'Product Manager', 


fullname01() 
{ 


return this.firstname + ' ' + this.lastname ; 


}， 


get fullname02( 
{ 


) 


return this.firstname + ' ' + this.lastname 


let d01 = Object. 
let d02 = Object. 
let d03 = Object. 


console.1og(d01) 
console.10g (d02) 
console.10g (d03) 
console.1o0g('') ; 


getOwnPropertyDescriptor (profile, 'position') ; 
getOwnPropertyDescriptor (profile, 'fullname01') ; 
getOwnPropertyDescriptor (profile, 'fullname02') ; 


console.1log (profile.fullname01()) ; 
console.log(profile.fullname02) ; 


console.10g('') ; 


dd 


d01 = Reflect .getOwnPropertyDescriptor (profile, 'position') ; 


d02 = Reflect .getOwnPropertyDescriptor (profile, 'fullname01') ; 


d03 = Reflect.getOwnPropertyDescriptor (profile, 'fullname02') ; 


console.10g (d01) 
console.log(d02) 
console.10g (d03) 
console.1og('') ; 


let d04 = Object. 


console.1o0g(d04) 


getOwnPropertyDescriptors (profile) ; 


属性 的 描述 器 
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【相关 说 明 】 


let profile = 
{ 


firstname: "Jason'v 
lastname: 'Alex', 

gender: 'male', 

age: 28, 

position: 'Product Manager', 


这 5 个 语句 分 别 定义 了 变量 profile 的 对 象 实例 中 的 5 个 新 属性 。 


fullname01() 
{ 


return this.firstname + ' ' + this.lastname ; 
此 语句 返回 了 【在 变量 profile 的 对 象 实例 中 ,其 属性 firstname 的 字符 串 'Jason' 与 属性 lastname 
的 字符 串 'Alex"， 被 合并 】 之 后 的 字符 串 Jason Alex'。 其 中 ， 内 置 的 局 部 变量 this， 指 向 变量 profile 
的 对 象 实例 本 身 。 
}, 
上 述 语 法 定义 了 变量 profile 的 对 象 实例 中 的 新 函数 fullname010， 可 用 来 返回 字符 串 Jason 
Alex'。 


get fullname02 () 
{ 


return this.firstname + ' ' + this.lastname 


} 

此 语法 通过 关键 字 get， 将 函数 包 llname020， 设 置 为 getter。getter 被 访问 (调用 ) 时 ， 必 须 
省 略 其 小 括号 ， 例 如 【profile.fullname02】 并 不 带 小 插 号。 

和 

上 述 语 法 声明 了 初始 数据 为 内 含 多 个 成 员 的 对 象 实例 的 变量 profile。 

let d01 = Object.getOwnPropertyDescriptor (profile, "position') ; 

此 语句 通过 函数 Object.getOwnPropertyDescriptor(), 返回 在 变量 profile 的 对 象 实例 中 , 其 属性 
position 的 相关 描述 {value: "Product Manager", writable: true, enumerable: true, configurable: true}， 并 
赋 给 变量 d01。 

let d02 = Object .getOwnPropertyDescriptor (profile, 'fullname01') ; 

此 语句 通过 函数 Object.getOwnPropertyDescriptor(), 返回 在 变量 profile 的 对 象 实 例 中 , 其 函数 
fullname010 的 相关 描述 {value: f, writable: true, enumerable: true, configurable: true}， 并 赋 给 变量 
d02。 


let d03 = Object.getOwnPropertyDescriptor (profile, 'fullname02') ; 


此 语句 通过 函数 Object.getOwnPropertyDescriptor()， 返 回 在 变量 profile 的 对 象 实例 中 ， 作 为 
getter 的 fullname02() 的 相关 描述 {get: f, set: undefined, enumerable: true, configurable: true} ， 并 赋 给 
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变量 d03。 


console.10g(d01) »; 
console.10g(d02) ; 
console.10g(d03) ; 
console.1l0g('') ; 


console.1log (profile.fullname01()) ; 
console.1log (profile.fullname02) ; 


【profile.fullname010】 与 【profile.fullname02】 均 会 返回 字符 串 'Jason Alex'。 因 为 fullname02 
被 定义 成 为 变量 profile 对 象 实例 中 的 getter， 所 以 在 使 用 时 ， 不 可 加 上 一 对 小 括号 。 


console.1og('') ; 
d01 = Reflect .getOwnPropertyDescriptor (profile, 'position') ; 


【Reflect.getOwnPropertyDescriptor(profile,position)】 等 价 于 【Object.getOwnPropertyDescriptor 
(profile,'position')】 会 返回 在 变量 profile 的 对 象 实例 中 , 其 属性 position 的 相关 描述 {value: "Product 
Manager", writable: true, enumerable: true, configurable: true} 。 


d02 = Reflect .getOwnPropertyDescriptor (profile, 'fullname01') ; 

【 Reflect.getOwnPropertyDescriptor(profile,'fullname01")】 等 价 于 【Object.getOwnPropertyDescriptor 
(profile,'fullname01')】, 会 返回 在 变量 profile 的 对 象 实例 中 , 其 函数 follname01() 的 相关 描述 {value: 
f, writable: true, enumerable: true, configurable: true} 。 

d03 = Reflect .getOwnPropertyDescriptor (profile, 'fullname02') ; 
【Reflect.getOwnPropertyDescriptor(profile,'fullname02")】 等 价 于 【Object.getOwnPropertyDescriptor 


(profile,fullname02)】， 会 返回 在 变量 profile 的 对 象 实例 中 ， 其 作为 getter 的 fllname020 的 相关 描 
述 {get: f, set: undefined, enumerable: true, configurable: true} 


console.log(d01) ; 
console.log(d02) ; 
console.log(d03) ; 


console.10g('') ; 


let d04 = Object.getOwnPropertyDescriptors (profile) ; 


Object.getOwnPropertyDescriptors(profile) 可 用 来 返回 在 变量 profile 的 对 象 实例 中 , 其 所 有 自 定 
义 成 员 ( 属 性、 函数 、getter 和 setter) 的 如 下 相关 描述 : 


age: {value: 28, writable: true, enumerable: true, configurable: true} 
firstname: {value: "Jason", writable: true, enumerable: true, configurable: true} 


fullname01: {value: f, writable: true, enumerable: true, configurable: true} 


gender: {value: "male", writable: true, enumerable: true, configurable: true} 


. 
. 

. 

® fllname02: {get: f, set: undefined, enumerable: true, configurable: true} 

. 

® lastname: {value: "Alex", writable: true, enumerable: true, configurable: true} 
. 


position: {value: "Product Manager", writable: true, enumerable: true, configurable: true} 
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13.8 返回 特定 对 象 的 原型 (ES6 ) 


通过 函数 Reflect.getPrototypeOfD)， 可 返回 特定 对 象 的 原型 (prototype) 。 请 参看 如 下 示例 。 
【13-8-^-Reflect-getPrototypeOfjs】 


【相关 说 明 】 
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于 
上 述 语法 声明 了 初始 数据 为 内 含 多 个 成 员 的 对 象 实例 的 变量 profile。 


let result01 = Object.getPrototypeOf (profile) ; 
let result02 = Reflect .getPrototypeOf (profile) ; 


【Object.getPrototypeOf(profile)】 与 【Reflect.getPrototypeOftprofile)】 均 会 返回 变量 profile 的 
对 象 实例 的 原型 (prototype) {constructor: f, defineGetter :f,_ defineSetter : f, hasOwnProperty: 
f,_ lookupGetter :f/f,*…}。 


console.1og (result01) ; 
console.1og (result02) ; 
console.1log('') ; 


console.1log (result01 === result02) ; 
在 此 ， 表 达 式 【result01 = 一 result02】 被 评估 为 布尔 值 tue， 意 味 着 变量 result01 与 result02 


的 数据 ， 被 视 为 占用 相同 内 存 引 址 的 原型 。 
13.9 判断 特定 属性 的 存在 性 (ES6 ) 


通过 函数 Reflect.has()， 可 判断 特定 对 象 实例 ， 是 否 存在 特定 名 称 的 成 员 ( 属 性、 函数 、getter 
和 setter) 。 请 参看 如 下 示例 。 


【13-9-^-Reflect-has.js】 


let Profile = 
{ 
firstname: 'Jason', 
lastname: 'Alex', 
gender: 'male', 
age: 28, 
position: 'Product Manager', 


fullname01() 

{ 

return this.firstname + ' ' + this.lastname ; 
}, 


get fullname02() 
{ 
return this.firstname + ' ' + this.lastname 
} 
} 


let result = Reflect.has (profile,'age') ; 
console.log(result) ; 


result = Reflect.has(profile,'fullname02') ; 
console.log (result) ; 
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result = Reflect.has(profile,'fullname03') ; 
console.log (result) ; 


【相关 说 明 】 


let profile = 
{ 
firstname: 'Jason', 
lastname: 'Alex', 
gender: 'male', 
age: 28, 
position: 'Product Manager', 


fullname01() 

{ 

return this.firstname + ' ' + this.lastname ; 
}， 


get fullname02 () 
{ 
return this.firstname + ' ' + this.lastname 
} 
i 


上 述 语 法 声明 了 初始 数据 为 内 含 多 个 成 员 的 对 象 实例 的 变 
let result = Reflect.has (profile,'age') ; 


此 语句 声明 了 初始 数据 为 布尔 值 true 的 变量 result。 其 中 ， 


量 profile。 


Reflecthas(profileyage) 判 断 出 在 变 


量 profile 的 对 象 实例 中 ， 的 确 存 在 属性 age， 并 返回 布尔 值 true。 


console.1log (result) ; 


result = Reflect .has (Profile,'fullname02') ; 


此 语句 将 布尔 值 true, 赋 给 变量 result。 其 中 ,Reflecthas(profile,fullname02) 判 断 出 在 变量 profile 
对 象 实例 中 ， 的 确 存 在 名 称 为 fullname02 的 getter， 并 返回 布尔 值 true。 


console.log(result) ; 


result = Reflect.has(profile,'fullname03') ; 


此 语句 将 布尔 值 false, 赋 给 变量 result。 其 中 , Reflect.has(profile,'fullname03') 判 断 出 变量 profile 
的 对 象 实例 中 ， 并 不 存在 名 称 为 fullname03 的 成 员 ( 属 性、 函数 、getter 或 setter) ， 并 返回 布尔 值 


false。 


13.10 “判断 与 设置 特定 对 象 的 扩展 性 (ES6 ) 


通过 函数 ReflectisExtensible0， 可 判断 特定 对 象 实例 ， 是 否 可 被 扩展 新 的 属性 ;通过 函数 


Reflect.preventExtensions()， 可 制止 特定 对 象 实例 ， 被 扩展 新 的 


属性 。 请 参看 如 下 示例 。 
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【13-10-^-Reflect-isExtensible-and-preventExtensions.js】 


【相关 说 明 】 
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return this.firstname + ' ' + this.lastname 


} 


上 述 语法 声明 了 初始 数据 为 内 含 多 个 成 员 的 对 象 实例 的 变量 profile。 


// let result = Object.isExtensible(profile) ; 
let result = Reflect.isExtensible (Profile) ; 


【Object.isExtensible(profile)】 与 【Reflect.isExtensible(profile)】 均 会 返回 布尔 值 tue， 并 赋 给 


变量 result， 意味 着 变量 profile 的 对 象 实例 ， 是 可 被 扩充 新 成 员 ( 属 性、 函数 、getter 与 setter) 的 。 


console.log(result) ; 
console.1log('') ; 


// Object.seal (profile) ; 

// Object.freeze (profile) ; 

// Object.preventExtensions (profile) ; 
Reflect .PreventExtensions (profile) ; 


这 4 个 语句 具有 相同 的 效果 ， 均 可 使 得 变量 profile 的 对 象 实例 ， 禁 用 扩充 机 制 。 


result = Object.isExtensible (profile) ; 


Object.isExtensible(profile) 当 前 返回 布尔 值 色 lse， 并 赋 给 变量 result， 意 味 着 变量 profile 的 对 


象 实例 ， 当 前 无 法 被 扩充 新 成 员 ( 属 性、 函数 、getter 与 setter) 。 


console.log (result) ; 


profile.department = 'Production' ; 


语句 试图 新 增 变 量 profile 的 对 象 实例 中 的 新 属性 department 和 其 数据 字符 串 'Production'。 


i 


然而 ， 变 量 profile 的 对 象 实例 的 扩充 机 制 ， 已 经 被 禁用 ， 所 以 上 述 新 增 的 动作 会 失败 。 


console.log (Profile) ; 


此 语句 显示 出 {firstname: "Jason", lastname: "Alex", gender: "male", age: 28, position: "Product 


Manager", …} 的 信息 。 可 看 出 并 不 存在 属性 department。 


13.11 简易 定义 新 届 性 (ES6 ) 


通过 函数 Reflect.set()， 可 间接 在 特定 对 象 实例 中 ， 简 易 定 义 其 新 属性 。 请 参看 如 下 示例 。 
【13-11-^-Reflect-set.js 


let shapes = {} : 


shapes['diamond'] = 4 ; 
shapes.parallelogram = 4 ; 


Reflect .defineProperty(shapes, 'trapezoid', {value: 4,writable: false, enumerable: true, 
configurable: false}) ; 
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Reflect.set (shapes, 'square', 4) ; 
Reflect .set (shapes, 'triangle', 3) ; 


console.log(shapes) ; 
console.1log('') ; 


AR 
let metals = ['Zinc'] ; 


metals.push('Silver') ; 
metals.unshift ('Gold') ; 
metals[3] = 'Copper' ; 
metals.splice(1l, 2,'Iron','Tin') ; 


Reflect.set (metals, 4,'Aluminum') ; 
console.log (metals) ; 


Reflect .set (metals, 'length', 10) ; 
console.log (metals) ; 


【相关 说 明 】 


let shapes = {}; 


声明 了 初始 数据 为 空 对 象 实例 f} 的 变量 shapes。 


shapes['diamond'] = 4; 
shapes.parallelogram = 4 ; 


这 两 个 语句 均 可 在 变量 shapes 的 对 象 实例 中 ， 添 加 新 的 属性 及 其 数据 ， 例 如 属性 diamond 与 


parallelogram 及 其 相同 的 数值 4。 


Reflect .defineProperty (shapes, 'trapezoid', {value: 


configurable: false}) ; 


此 语句 在 变量 shapes 的 对 象 实例 中 ， 精 细 添 加 新 的 


4,writable: false, enumerable: true, 


属性 、 其 数值 ， 以 及 其 特征 (writable、 


enumerable 与 configurable) 。 例 如 属性 trapezoid 和 其 数值 4， 以 及 其 各 项 特征 。 


Reflect .set (shapes, 'square', 4) ; 
Reflect .set (shapes, 'triangle', 3) ; 


这 两 个 语句 均 通 过 了 函数 Reflect.set(), 在 变量 shapes 的 对 象 实例 中 , 简易 添加 新 的 属性 square 


和 其 数值 4， 以 及 属性 triangle 和 其 数值 3。 


console.log (shapes) ; 


显示 出 变量 shapes 的 对 象 实例 {diamond: 4, parallelogram: 4, square: 4, triangle: 3, trapezoid: 4} 。 


console.10g('') ; 


let metals = ['Zinc'] ; 


声明 初始 数据 为 数组 实例 ['Zinc"] 的 变量 metals。 


metals.push('Silver') ; 
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语句 使 得 变量 metals 的 数组 实例 ， 在 其 尾 端 ， 被 新 增 字符 串 'Silver"， 成 为 数组 实例 ['Zinc, 
'Silver']。 
metals.unshift('Gold') ; 

语句 使 得 变量 metals 的 数组 实例 ,在 其 前 端 ,被 新 增 字 符 串 'Gold', 成 为 数组 实例 ['Gold', 'Zinc'， 
'Silver]。 
metals[3] = "Copper' ; 

此 语句 将 字符 串 'Cooper， 赋 给 在 变量 metals 的 数组 实例 中 ， 其 索引 值 为 3( 第 4 个 ) 的 元 素 ， 
成 为 数组 实例 ['Gold', 'Zince', 'Silver', 'Copper']。 


metals.splice(1l, 2,'Iron','Tin') ; 


此 语句 在 变量 metals 的 数组 实例 "Gold','Zinc','Silver,'Copper] 中 ， 从 索引 值 1 (第 2 个 ) 的 元 
素 开始 ， 取 出 两 个 元 素 的 数据 字符 串 'Zinc' 和 'Silver， 成 为 数组 实例 "Gold,'Copper]， 然 后 一 样 在 索 
引 值 1 (第 2 个 ) 的 元 素 开始 ， 插 入 数据 字符 串 为 Tron 与 Tin' 的 两 个 元 素 ， 成 为 [Gold'，Tron'，Tin'， 
"Copper] 。 

Reflect .set (metals, 4,'Aluminum') ; 

此 语句 将 字符 串 'Aluminum'， 赋 给 在 变量 metals 的 数组 实例 中 ， 其 索引 值 为 4 (第 5 个 ) 的 元 


素 ， 成 为 数组 实例 ['Gold','Tron','Tin','Copper',Aluminum']。 


console.log (metals) ; 


Reflect .set (metals, 'length', 10) ; 

执行 此 语句 之 前 ， 变 量 metals 的 数组 实例 中 的 元 素 个 数 为 5。 此 语句 将 整数 值 10 赋 给 变量 
metals 的 数组 实例 中 的 属性 length， 进 而 设置 了 变量 metals 的 数组 实例 ， 可 容纳 的 元 素 个 素 为 10。 
换言之 ， 此 语句 使 得 变量 metals 的 数组 实例 ['Gold', 'Iron', 'Tin', 'Copper', 'Aluminum', empty X 5]， 
成 为 可 容纳 10 个 元 素 的 数组 实例 ， 其 中 最 后 5 个 是 空 元 素 。 


13.12 ”重新 设置 特定 对 象 的 原型 (ES6 ) 


通过 函数 Reflect.setPrototypeOfD， 可 重新 将 特定 对 象 实例 的 原型 (prototype) ， 设 置 为 另 一 
对 象 实例 。 请 参看 如 下 示例 。 


【13-12-^-Reflect-setPrototypeOfjs】 


let book01 = {title: 'New Thoughts', price: 150, author: 'Brat Terminator', Publisher: 
'TsingHua', date: '2018/06/06'} ; 


let book02 = {title: 'New Thinkings', price: 180, author: 'Brat Terminator', Publisher: 
'TsingHua', date: '2018/07/07', version: 3} ; 


let result = Object.setPrototypeOf (book01, String) ; 
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console.log(result) ; 
console.log (book01) ; 
console.10g('') ; 


result = Reflect.setPrototypeOf (book02, Number) ; 


console.log(result) ; 
console.log (book02) ; 
console.1og (book02.EPSILON) ; 


【相关 说 明 】 


let book01 = {title: 'New Thoughts', price: 150, author: 'Brat Terminator', Publisher: 
'TsingHua', date: '2018/06/06'} ; 


此 语句 声明 了 初始 数据 为 内 含 多 个 属性 的 对 象 实例 的 变量 book01。 


let book02 = {title: 'New Thinkings', price: 180，author: 'Brat Terminator', Publisher: 
'TsingHua', date: '2018/07/07', version: 3} }; 


此 语句 声明 了 变量 book02， 其 初始 数据 为 内 含 包括 属性 version 在 内 的 多 个 属性 的 对 象 实例 。 

let result = Object.setPrototypeOf (book01, String) ; 

此 语句 声明 了 变量 result, 其 初始 数据 为 内 含 String 对 象 的 原型 (prototype) 的 实例 {title: "New 
Thoughts", price: 150, author: "Brat Terminator", Publisher: "TsingHua", date: "2018/06/06", 
_proto _:f String()}。 其 中 ， 从 【__proto _:f String()】 的 描述 中 可 看 出 ， 变 量 book01 对 象 实例 
的 原型 被 置换 成 为 String 对 象 的 原型 。 

值得 留意 的 是 ，Object.setPrototypeOf(book01, String) 会 返回 变量 book01 的 对 象 实例 本 身 。 


console.log(result) ; 
console.log (book01) ; 


这 两 个 语句 均 显示 出 {title: "New Thoughts", price: 150, author: "Brat Terminator", Publisher: 
"TsingHua", date: "2018/06/06"，_proto _:f String()} 的 信息 。 


console.1log('') ; 


result = Reflect.setPrototypeOf (book02, Number) ; 


新 设置 变量 result 的 数据 为 内 含 Number 对 象 原型 (prototype) 的 实例 {title: "New Thinkings"，, 
price: 180, author: "Brat Terminator", Publisher: "TsingHua", date: "2018/07/07", version: 3, 
_ proto :Number0}。 其 中 ， 从 【__proto _:f Number()】 的 描述 中 可 以 看 出 ， 变 量 book02 的 对 
象 实例 的 原型 ， 被 置换 成 为 Number 对 象 的 原型 。 请 留意 ，Reflect.setPrototypeOf(book02, Number) 
返回 布尔 值 trtue， 意 味 着 成 功 设置 了 变量 book02 的 对 象 实例 的 原型 。 


console.log(result) ; 
显示 出 布尔 值 true。 


console.log(book02) ; 


显示 出 {title: "New Thinkings", price: 180, author: "Brat Terminator", Publisher: "TsingHua", date: 
"2018/07/07", version: 3，_proto _:f Number0} 的 信息 。 
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console.1l1og (book02.EPSILON) ; 


因为 变量 book02 当前 的 原型 , 已 被 置换 成 为 Number 对 象 的 原型 ， 所 以 变量 book02 就 被 内 置 
了 常量 属性 EPSILON， 使 得 book02.EPSILON 可 返回 数值 2.220446049250313e-16。 


13.13 ”返回 与 列举 特定 对 象 的 自 定 义 属性 (ES6 ) 


通过 函数 ReflectownKeys()， 可 返 对 象 实例 的 自 定义 属性 所 构成 的 数组 实例 , 进而 搭配 
循环 语句 ， 以 列举 出 特定 对 象 实例 的 自 定义 属性 。 请 参看 如 下 两 个 示例 。 


【13-13-^-e1-Reflect-ownKeys.js】 


let profile = 

{ 

firstname: 'Jason', 
lastname: 'Alex', 

gender: 'male', 

age: 28, 

position: 'Product Manager', 


fullname01() 
{ 

return this.firstname + ' ' + this.lastname ; 
}, 


get fullname02() 
{ 
return this.firstname + ' ' + this.lastname 
} 
人 


// let result = Object.keys (profile) ; 
let result = Reflect.ownKeys (profile) ; 


console.log (result) ; 


【相关 说 明 】 


let profile = 

{ 

firstname: 'Jason', 
lastname: 'Alex', 

gender: 'male', 

age: 28, 

position: 'Product Manager', 


fullname01() 

{ 

return this.firstname + ' ' + this.lastname ; 
}, 
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get fullname02() 
{ 


return this.firstname + ' ' + this.lastname 
} 
J 


上 述 语法 声明 了 初始 数据 为 内 含 多 个 成 员 的 对 象 实例 的 变量 profile。 


// let result = Object.keys (Profile) ; 
let result = Reflect.ownKeys (Profile) ; 


【Object.keys(profile)】 与 【Reflect.ownKeys(profile)】 均 可 返回 【在 变量 profile 对 象 实例 中 ， 


其 各 成 员 ( 属 性 、 函 数 、getter 与 setter) 的 名 称 所 构成 的 新 数组 实例 ["firstname", "lastname", "gender", 


"age 


, "position", "fullname01", "fullname02"] 。 
【13-13-^-e2-enumerations-of-object-properties.js】 

let book01 = {title: 'New Thoughts', price: 150, author: 'Brat Terminator', Publisher: 
'TsingHua', date: '2018/06/06'} ; 

let book02 = {title: 'New Thinkings', price: 180, author: 'Brat Terminator', Publisher: 


'TsingHua', date: '2018/07/07', version: 3} ; 


console.log (Object.keys (book01)) ; 
console.1og (Reflect .ownKeys (book02)) ; 
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for (p of Object.keys (book01)) 
{ 

console.1og(`The value of property'${p}'= ${book01[p]}..) ; 
} 


console.log('\n\n') ; 


for (p of Reflect.ownKeys (book02)) 
{ 

console.1log( ‘The value of property'${p}'= ${book01[p]}.*) ; 
} 


console.10g('') ; 
【相关 说 明 】 


let book01 = {title: 'New Thoughts', price: 150, author: 'Brat Terminator', Publisher: 
'TsingHua', date: '2018/06/06'} ; 


此 语句 声明 了 初始 数据 为 内 含 多 个 属性 的 对 象 实例 的 变量 book01。 


let book02 = {title: 'New Thinkings', price: 180, author: 'Brat Terminator', Publisher: 
'TsingHua', date: '2018/07/07', version: 3} ; 


此 语句 声明 了 变量 book02， 其 初始 数据 为 内 含 包括 属性 version 在 内 的 多 个 属性 的 对 象 实例 。 
console.1og (Object .keys (book01)) ; 


【Object.keys(book01)】 与 【Reflect.ownKeys(book01)】 均 可 返回 【在 变量 book01 对 象 实例 中 ， 
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其 各 成 员 〈 属 性 、 函 数 、getter 与 setter) 的 名 称 所 构成 】 的 新 数组 实例 ["title"，"price"，"author"， 
"Publisher", "date"]。 


console.log (Reflect.ownKeys (book02)) ; 
【Objectkeys(book02)】 与 【ReflectownKeys(book02)】 均 可 返回 【在 变量 book02 对 象 实例 中 ， 

其 各 成 员 的 名 称 所 构成 】 的 新 数组 实例 ["title", "price", "author", "Publisher", "date", "version"] 。 

2 

声明 初始 数据 为 空 字符 串 " 的 变量 p。 

for (p of Object.keys (book01)) 

因为 Object.keys(book01) 会 返回 元 素 个 数 为 5 的 新 数组 实例 ["title", "price", "author", "Publisher", 
"date"]， 所 以 此 for...of 循环 语句 ， 会 迭代 5 次 ， 使 得 变量 p 均 会 被 赋予 上 述 数 组 实例 里 的 其 中 一 
个 字符 串 。 

{ 


console.log(‘The value of property'${p}'= $tbook01[P]}.) ; 
此 语句 在 迭代 5 次 中 ， 分 别 显示 出 如 下 信息 : 
The value of property ‘title' = New Thoughts. 
The value of property 'price' = 150. 
The value of property 'author = Brat Terminator. 
The value of property 'Publisher' = TsingHua. 
The value of property 'date' = 2018/06/06. 


} 


console.log('\n\n') ; 


for (p of Reflect.ownKeys (book02)) 


因为 Reflect.ownKeys(book02) 会 返回 元 素 个 数 为 6 的 新 数组 实例 ["title"，"price"，"author"， 
"Publisher", "date", "version"]， 所 以 此 for...of 循环 语句 ， 会 迭代 6 次 ， 使 得 变量 p 均 会 被 赋予 数组 
实例 里 的 其 中 一 个 字符 串 。 

{ 


console.1og(`The value of property'${p}'= S${book01[P]}.) ; 
此 语句 在 迭代 6 次 中 ， 分 别 显示 出 如 下 信息 : 
The value of property ‘title' = New Thoughts. 
The value of property 'price' = 150. 
The value of property 'author = Brat Terminator. 
The value of property 'Publisher' = TsingHua. 
The value of property 'date' = 2018/06/06. 


The value of property 'version' = undefined. 
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13.14 练 习 题 


1. 已 知 如 下 JavaScript 源 代码 片段 : 
let profile = {name: 'Andy', age: 33, country: 'China'} ; 


Object.defineProperty (profile, 'department', {value: 'IT', writable: true, enumerable: true, 
configurable: false}) ; 


试 改写 【Object.defineProperty( .…)】 的 部 分 ， 成 为 等 价 语法 ， 使 得 属性 department 可 被 新 增 和 
设置 。 

2. 已 知 如 下 JavaScript 源 代码 的 语句 : 

let result = Reflect.has (profile, 'department') ; 

试 改写 上 述 语句 ， 成 为 等 价 的 语句 。 

3. 已 知 如 下 JavaScript 源 代码 的 语句 : 


let result = Reflect.ownKeys (Profile) ; 


试 改写 上 述 语句 ， 成 为 等 价 的 语句 。 


第 14 章 
Proxy 对 象 Int| 对 象 和 navigator 对 象 实例 


本 章 内 容 主 要 聚焦 于 【用 来 改造 特定 对 象 实例 的 访问 机 制 】 的 Proxy 对 象 、 【用 来 格式 化 各 国 
语言 相关 的 字符 串 】 的 Intl 对 象 ， 以 及 【提供 浏览 器 相关 信息 和 当前 地 理 位 置 】 的 navigator 对 象 
实例 。 


14.1 ”Proxy 对 象 


Proxy 对 象 主要 用 来 改造 特定 对 象 实例 的 访问 机 制 ， 成 为 新 的 访问 代理 〈proxy) 机 制 ， 以 便 
不 存在 的 属性 ， 被 访问 到 时 ， 或 者 超出 范围 的 数据 ， 被 赋予 特定 属性 时 ， 被 改造 之 后 的 访问 机 制 ， 
可 返回 动态 产生 的 数据 。 请 参看 如 下 示例 。 

【14-1-^-Proxy-object,js】 


function get value (obpj, attr) 
let choice ; 


choice = attr in obj ? obj[attr]: 'N/A' ; 


return choice ; 


} 


function set value (obj, attr, value) 
{ 
let new value ; 


switch (attr) 
{ 
case 'age': 
if (value > 150) 
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new value = 'Impossibly old...' : 
break ; 


case 'gender': 


if (! (value in ['male','female'])) 
new value = 'Impossible gender...' ; 
break ; 
default: 


new value = value ; 


} 


obj [attr] = new value ; 
} 


var cur obj = {name: 'Daisy', gender: 'female', age: 30} ; 


// var proxy handler = {get: get value} ; 


Var proxy handler = {get: get value , set: set value }; 


Var p01l = new Proxy (cur_ obj, proxy handler) ; 


P01.department = 'finance' ; 
p01l.position = 'manager' }; 


console.log (p01) ; 
console.log(p0l.name) ; 
console.log (p01.position) ; 
console.log (p01.company) ; 
console.log (p01.salary) ; 
console.1log('') ; 


var p02 = new Proxy(cur obj, proxy handler) ; 


p02.age = 152 : 
p02.gender = 'unknown' ; 


console.1log (p02) ; 


【相关 说 明 】 
请 参看 本 节 中 各 小 节 的 相关 说 明 。 


14.1.1 ”创建 访问 代理 机 制 的 构造 函数 “ES6) 


欲 创建 特定 对 象 实例 的 访问 代理 机 制 ， 需 要 通过 Proxy 对 象 的 构造 函数 来 达成 。 


Var p01 = new Proxy(cur obj, proxy handler) ; 


此 语句 声明 了 初始 数据 为 Proxy 对 象 实例 的 变量 p01。 在 其 等 号 右 侧 ,调用 了 Proxy 对 象 的 构 
造 函数 Proxy(cur_obj, proxy_handler)， 并 将 变量 cur_obj 的 对 象 实例 、 变 量 proxy_handler 的 对 象 实 
例 ， 作 为 参数 的 数据 ,传递 至 Proxy 对 象 的 构造 函数 内 部 。 因 此 , 在 变量 p01 的 Proxy 对 象 实例 中 ， 


同时 带 有 在 变量 cur_obj 的 对 象 实例 中 ， 可 被 访问 的 


属性 成 员 name、gender 和 age， 以 及 在 变量 
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proxy_handler 的 对 象 实例 中 ， 不 可 被 访问 的 getter 成 员 get_value 和 setter 成 员 set_value。 

var p02 = new Proxy(cur obj, proxy handler) ; 

此 语句 声明 了 初始 数据 为 Proxy 对 象 实例 的 变量 p02。 在 其 等 号 右 侧 ， 调 用 了 Proxy 对 象 的 构 
造 函 数 Proxy(cur_obj, proxy_handler)， 并 将 变量 cur_obj 的 对 象 实例 、 变 量 proxy_handler 的 对 象 实 
例 ， 作 为 参数 数据 ， 传 递 至 Proxy 对 象 的 构造 函数 内 部 。 因 此 ， 在 变量 p02 的 Proxy 对 象 实例 中 ， 
同时 带 有 在 变量 cur_obj 的 对 象 实例 中 ， 可 被 访问 的 属性 成 员 name、gender 和 age， 以 及 在 变量 
proxy_handler 的 对 象 实例 中 ， 不 可 被 访问 的 getter 成 员 get_value 和 setter 成 员 set_value。 


14.1.2 ”确定 被 代理 的 特定 对 象 (ES6) 


运用 Proxy 对 象 的 构造 函数 之 前 ， 必 须 确 定 欲 被 代理 的 特定 对 象 实例 。 
Var cur obj = {name: 'Daisy'，gender: 'female', age: 30} ; 


此 语句 声明 了 初始 数据 为 内 含 3 个 属性 成 员 的 对 象 实例 的 变量 cur_obj。 


14.1.3” 自 定义 代理 函数 (ES6) 


运用 Proxy 对 象 的 构造 函数 之 前 ， 必 须 先 定义 达成 访问 代理 机 制 的 代理 函数 。 


function get value (obj, attr) 
{ 


let choice ; 

声明 局 部 变量 choice。 

choice = attr in obj ? obj[attr]: 'N/A' ; 

此 语句 用 来 判断 参数 attr 的 数据 字符 串 ， 是 否 为 参数 obj 的 对 象 实例 中 的 属性 名 称 。 若 是 ， 则 
将 其 属性 的 数据 ， 赋 给 局 部 变量 choice; 若 否 ， 则 将 字符 串 '"NWVA'， 赋 给 局 部 变量 choice。 
return choice ; 

返回 局 部 变量 choice 的 数据 。 

} 

上 述 语法 定义 了 带 有 参数 obj 与 attr 的 函数 get_value()， 并 作为 特定 Proxy 对 象 实例 的 getter 
成 员 。 


function set value(obj, attr, value) 
{ 


let new value ; 


声明 局 部 变量 new_value。 


switch (attr) 
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此 语法 用 来 进一步 判断 参数 attr 的 数据 ， 是 否 为 字符 串 'age' 或 'gender 等 。 
{ 
case "age': 
参数 attr 的 数据 ， 若 是 字符 串 'age'， 则 执行 下 方 到 最 接近 break 语句 为 止 的 源 代 码 。 


if (value > 150) 
new_value = 'Impossibly old...' ; 


在 此 ， 参 数 value 的 数值 ， 会 被 设置 为 属性 age 的 数值 。 若 参数 value 的 数值 大 于 150， 则 将 
串 'Impossibly old.…"， 赋 给 局 部 变量 new_value。 


字符 


守 


break ; 


case 'gender': 
参数 attr 的 数据 ， 若 是 字符 串 gender， 则 执行 下 方 到 最 接近 break 语句 为 止 的 源 代码 。 


if (! (value in ['male','female'])) 
new_value = 'Impossible gender...'; 


在 此 , 参数 value 的 数据 , 会 被 设置 为 属性 gender 的 数据 字符 串 。 若 参数 value 的 数据 字符 串 ， 
并 不 是 "male' 或 ,female'， 则 将 字符 串 'Impossibly gender.…， 赋 给 局 部 变量 new_value。 


break ; 


default: 
参数 attr 的 数据 ， 若 是 其 他 字符 串 ， 则 执行 下 方 至 末尾 处 为 止 的 源 代码 。 
new_value = value ; 
此 语句 将 参数 value 的 数据 ， 赋 给 局 部 变量 new_value。 
} 
obj [attr] = new value ; 
此 语句 将 局 部 变量 new_value 最 终 的 数据 , 赋 给 【在 参数 obj 的 对 象 实例 中 , 其 名 称 为 参数 attr 
的 数据 字符 串 所 代表 】 的 属性 。 
} 
上 述 语法 定义 了 带 有 参数 obj、attr 与 value 的 函数 set_value()， 并 作为 特定 Proxy 对 象 实例 的 


setter 成 员 。 


// var proxy handler = {get: get value} ; 
Var proxy handler = {get: get value , set: set value }; 


此 语句 声明 了 初始 数据 为 内 含 getter 与 setter 成 员 的 对 象 实例 的 变量 proxy_handler。 
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14.1.4 调试 访问 代理 机 制 (ES6) 


设置 好 实现 访问 代理 机 制 的 Proxy 对 象 实例 之 后 ,可 通过 访问 Proxy 对 象 实例 的 方式 , 调试 其 
代理 机 制 是 否 正常 工作 。 


P01.department = "finance' ; 
P01.position = 'manager' }; 


这 两 个 语句 分 别 新 增 了 变量 p01 的 Proxy 对 象 实例 中 的 新 属性 department 和 manager。 其 中 ， 
属性 department 的 初始 数据 为 字符 串 'finance'， 


console.log (p01) ; 


属性 position 的 初始 数据 则 为 字符 串 'manager'。 


此 语句 显示 出 Proxy {name: "Daisy", gender: "female"，age: 30, department: "finance", position: 
"manager"} 的 信息 。 从 中 可 以 看 出 ， 在 变量 p01 的 对 象 实例 中 ， 带 有 【在 变量 cur_obj 的 对 象 实例 
中 ， 可 被 访问 】 的 属性 成 员 name、gender 与 age。 

console.1og(P01.name) ; 

显示 出 字符 串 'Daisy' 的 信息 。 

console.log (p01.position) ; 
显示 出 字符 串 'manager' 的 信息 。 
console.log (p01.company) ; 
console.log (p01.salary) ; 

这 两 个 语句 均 显 示 出 字符 串 'N/A' 的 信息 。 这 是 因为 ，p01.company 与 p01.salary 用 于 个 别 取 出 
F 会 访问 变量 p01 的 Proxy 对 象 实例 中 的 getter 成 员 get_value, 进 
而 间接 调用 名 称 为 get_value 的 函数 , 使 得 在 函数 get_value() 内 , 语句 【choice = attr in obj ? obj[attr]: 
'N/A' ;】 被 执行 ， 并 判断 出 名 称 为 company 及 salary 的 成 员 ， 并 不 存在 于 变量 cur_obj 的 Proxy 对 


属性 company 与 sa 


象 实例 中 。 所 以 ， 函 数 get_value() 最 终 会 返 加 


的 数据 。 


ary 的 数据 ,并 


p02.age = 152 ; 


此 语句 试图 在 变量 p02 的 Proxy 对 象 实例 中 ， 重 新 设置 其 成 员 属性 age 的 数据 ， 成 为 整数 值 
152， 但 是 并 没有 成 功 ， 反 而 使 得 p02.age 的 数据 ， 变 成 字符 串 'Tmpossibly old..…。 这 是 因为 ， 语 句 
【p02.age = 152 ;】 被 用 来 设置 其 属性 age 的 数据 ， 并 会 访问 变量 p02 的 Proxy 对 象 实例 中 的 setter 
成 员 set_value， 进 而 间接 调用 了 名 称 为 set_value 的 函数 ， 并 判断 出 名 称 为 age 的 属性 成 员 的 数值 ， 


是 否 试图 被 设置 为 大 


p02.gender = " 


unknown' ; 


此 语句 试图 在 变量 p02 的 Proxy 对 
串 "unknown'， 但 是 并 没有 成 功 ， 反 而 使 


字符 串 '"N/A'， 并 间接 成 为 p01.company 与 p01.salary 


F 150 的 数值 ,使 得 在 函数 set_value() 内 , 语 包 [new_value = 'Impossibly old..…';】 
和 【obj[attr] = new_value ;】 先 后 被 执行 ,最 终 导致 p02.age 的 数据 , 间接 成 为 字符 串 'Impossibly old…'。 


象 实例 中 ， 重 新 设置 其 成 员 属性 gender 的 数据 ， 成 为 字符 
得 p02.gender 的 数据 ， 变 成 字符 串 'Tmpossible gender…。 这 


是 因为 , 【p02.gender= 'unknown' ;】 被 用 来 设置 其 属性 gender 的 数据 ， 并 会 访问 变量 p02 的 Proxy 


对 象 实例 中 的 setter 成 员 set_value, 进 而 


间接 调用 了 名 称 为 set_value 的 函数 , 并 判断 出 名 称 为 gender 
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的 属性 成 员 的 数据 ， 是 否 试图 被 设置 为 'male' 和 'female' 以 外 的 字符 串 ， 使 得 在 函数 set_value() 内 ， 
语句 【new_value = 'Impossible gender...' ;】 和 【obj[attr] = new_value ;】 先 后 被 执行 ， 最 终 导致 
p02.gender 的 数据 ， 间 接 成 为 字符 串 'Impossibly gender.…。 


console.1og(P02) ; 


此 语句 显示 出 Proxy {name: "Daisy"，gender: "Impossible gender...", age: "Impossibly old...", 
department: "finance", position: "manager"} 的 信息 。 从 中 可 以 看 出 , 在 变量 p02 的 Proxy 对 象 实例 中 ， 
带 有 【在 变量 cur_obj 的 对 象 实例 中 ， 可 被 访问 】 的 属性 成 员 name、gender 与 age。 其 中 ， 原 本 试 
图 被 设置 的 属性 age 的 数值 152 和 属性 gender 的 数据 unknown'， 因 为 不 符合 【小 于 150】 和 【只 能 
是 字符 串 'male' 或 female'】 的 规定 ， 导 致 其 属性 age 的 数据 ， 间 接 变 成 Impossibly old..'， 而 其 属性 
gender 的 数据 ， 间 接 变 成 Impossible gender..…。 


14.2 Intl 对 象 


Intl 对 象 实例 的 函数 和 属性 ， 均 有 关于 语言 敏感 〈language sensitive) 的 处 理 机 制 ， 包 括 字符 
串 的 比较 、 日 期 与 时 间 的 格式 以 及 数字 的 格式 。 


14.2.1 ”精确 比较 语言 敏感 的 字符 串 (ECMA-402) 


通过 构造 函数 Intl.Collator(), 可 进一步 达成 精确 比较 语言 敏感 的 字符 串 的 任务 。 请 参看 如 下 示 
例 。 


【14-2-1-Intl-Collator.js】 


二 全 二 下 下 各 二 和 作用 全 村主 和 全 各 于 人 2 


Var collator = new Int1.Collator() ; 
var collator de = new Intl.Collator("de") ; 
Var collator sv = new Intl.Collator("sv") ; 


// in German, "i¥" sorts with "a" 
// return -1 means list[5]< list[0] 
console.log(collator_de.compare(list[5]，1list[0])) ; 


// in Swedish, "a" sorts after "z" 
// return 1 means list[5]> list[0] 
console.log (collator sv.compare (list[5], list[0])) ; 


console.log (collator.compare (list[2],'a')) ; 
console.1log('') ; 


console.log (list.sort (collator.compare)) ; 
console.log(list.sort (collator de.compare)) ; 
console.log (list.sort (collator sv.compare)) ; 
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【相关 说 明 】 
var list = [zacrvra'y'acyd'y aa] ; 
此 语句 声明 了 初始 数据 为 内 含 特殊 字母 的 数组 实例 的 变量 list。 
Var collator = new Int1.Collator() ; 


此 语句 声明 了 初始 数据 为 【Intl 对 象 中 的 Collator 子 对 象 实例 的 变量 collator。 因 为 Intl.CollatorO 


被 传 入 参数 的 数据 ， 所 以 变量 collator 的 对 象 实例 ， 可 用 来 比较 本 地 语言 〈 中 文 ) 相关 的 字符 


Var collator de = new Int1.Collator("de") ; 


此 语句 声明 了 初始 数据 为 【Intl 对 象 中 的 Collator 子 对 象 实例 】 的 变量 collator de 。 


Intl.Collator("de") 被 传 入 的 参数 数据 为 "de"， 所 以 变量 collator_de 的 对 象 实例 ， 可 用 来 比较 【 德 文 】 
相关 的 字符 串 。 


Var collator sv = new Intl.Collator("sv") ; 


此 语句 声明 了 初始 数据 为 【Intl 对 象 中 的 Collator 子 对 象 实例 】 的 变量 collator sv。 


Intl.Collator("sv") 被 传 入 的 参数 数据 为 "sv", 所 以 变量 collator sy 的 对 象 实例 , 可 用 来 比较 【瑞典 文 】 
相关 的 字符 串 。 


// in German, "“é" sorts with "a" 
// return -1 means list[5]< list[0] 
console.log(collator de.compare (list[5], list[0])) ; 


在 此 语句 中 ，list[5] 当 前 在 变量 list 的 数组 实例 中 ,代表 其 索引 值 为 5 (第 6 个 ) 的 元 素 的 字符 


定 ， 而 list[0] 则 代表 在 变量 list 的 数组 实例 中 ， 其 索引 值 为 0 (第 1 个 ) 的 元 素 的 字符 'z。 因 此 ， 
【collator_de.compare(list[5], list[0])】 等 同 于 【collator_de.compare( 和 lz 】， 返 回 -1， 意 味 着 在 【 德 
文 】 中 ， 字 符 血 的 数码 值 ， 小 于 之 的 数码 值 。 换 言 之 ， 字 符 生 被 编排 在 字符 z 【之 前 】。 


// in Swedish, "é¥" sorts after "z" 
// return 1 means list[5]> list[0] 
console.log(collator sv.compare (list[5], list[0])) ; 


collator_sv.compare(list[5], list[0]) 等 价 于 collator_sv.compare(a,z)， 会 返回 整数 值 1， 意味 着 在 


【瑞典 文 】 中 ， 字 符 守 的 数码 值 ， 大 于 的 数码 值 。 换 言 之 ， 字 符 和 被 编排 在 字符 'z【 之 后 】。 


console.log (collator.compare (list[2],'a')) ; 


在 此 语句 中 ，list[2] 当 前 在 变量 list 的 数组 实例 中 ,代表 其 索引 值 为 2 (第 3 个 ) 的 元 素 的 字符 


'a'"， 因 此 collator_de.compare(list[2],'a") 等 价 于 collator_de.compare(a'a)， 会 返回 整数 值 0， 意 味 着 
在 【中 文 】 里 ， 字 符 'a' 的 数码 值 ， 等 同 于 'a' 的 数码 值 。 


console.log(list.sort (collator.compare)) ; 


此 语句 显示 出 ["4","a", "an "ai "z", "a "] 的 信息 , 代表 在 变量 list 的 数组 实例 中 , 各 字符 在 【中 


文 】 里 的 编码 顺序 。 


console.log (list.sort (collator de.compare)) ; 
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语句 显示 出 ["a", "6", "部 , "a","z", "a "] 的 信息 , 代表 在 变量 list 的 数组 实例 中 , 各 字符 在 【 德 
文 】 ee 


console.log (list.sort (collator sv.compare)) ; 


显示 出 ["a", "4","z", "an "a", "a "] 的 信息 ， 代 表 在 变量 list 的 数组 实例 中 ， 各 字符 在 【瑞典 文 】 
里 的 编码 顺序 。 从 中 可 以 看 出 ， 字 符 在 瑞典 文 ， 明 显 和 在 德 文 与 中 文 里 的 编码 顺序 ， 有 所 不 同 。 


14.2.2 ”语言 敏感 的 日 期 与 时 间 格 式 (ECMA-402) 


通过 构造 函数 Intl.DateTimeFormat()， 可 进一步 获取 语言 敏感 的 特定 格式 的 日 期 与 时 间 。 请 参 
看 如 下 示例 。 

【14-2-2-Intl-DateTimeFormat.js】 

let special = new Date(2100, 11, 12, 14, 30, 0) ; 

let result = new Int1.DateTimeFormat ('en') .format (special) ; 


console.log(result) ; 


let options = 

{ 

year: 'numeric', 
month: 'numeric', 
day: 'numeric', 
hour: "numeric'y 
minute: 'numeric', 
second: 'numeric', 
hour1l2: true, 
timeZone: 'Asia/Shanghai' 
/有 


result = new Int1.DateTimeFormat('zh'，options) .format (Special) ; 
console.log (result) ; 

【相关 说 明 】 

let special = new Date(2100, 11, 12, 14, 30, 0) ; 


此 语句 声明 了 初始 数据 为 【内 含 日 期 与 时 间 2100/12/12 14:30:00】 相 关 数 据 的 Date 对 象 实例 
的 变量 special。 其 中 ， 第 2 个 参数 的 数值 11， 代 表 12 月 份 。 

let result = new Int1.DateTimeFormat ('"'en') .format (Special) ; 

此 语句 声明 了 变量 result， 其 初始 数据 为 英文 (en) 格式 的 日 期 与 时 间 的 字符 串 '12/12/2100'。 
其 中 ，Intl.DateTimeFormat('en').format(special) 会 返回 【在 变量 special 的 Date 对 象 实例 中 ， 其 日 期 
与 时 间 2100/12/12 14:30:00 相关 数据 ， 被 转换 】 之 后 的 英文 格式 的 日 期 与 时 间 字 符 串 '12/12/2100'。 


console.log (result) ; 


let options = 
{ 
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year: 'numeric', 
设置 其 年 份 为 公元 年 份 的 4 位 整数 值 。 
month: 'numeric', 
设置 其 月 份 为 整数 值 。 
day: 'numeric', 
设置 其 【日 】 为 整数 值 。 
hour: 'numeric', 
设置 其 【时 】 为 整数 值 。 
minute: 'numeric', 
设置 其 【分 】 为 整数 值 。 
second: 'numeric', 
设置 其 【 秒 】 为 整数 值 。 
hour12: true, 
设置 其 【时 】 为 12 小 时 制 。 
timeZone: 'Rsia/Shanghai' 
设置 其 【时 区 】 为 【亚洲 /上 海 市 】。 
Ys 
上 述 语法 声明 了 变量 options， 其 初始 数据 为 内 含 多 个 成 员 属性 的 对 象 实例 。 
result = new Intl.DateTimeFormat('zh', options).format (special) ; 
此 语句 声明 了 变量 result， 其 初始 数据 为 中 文 (zh) 格式 的 日 期 与 时 间 的 字符 串 '2100/12/12 下 
午 2:30:00'"。 其 中 ，Intl.DateTimeFormat('zh'，options).format(special) 会 返回 【在 变量 special 的 Date 
对 象 实例 中 ， 其 日 期 与 时 间 2100/12/12 14:30:00 相关 数据 ,被 转换 】 之 后 的 中 文 格式 的 日 期 与 时 间 
字符 串 '2100/12/12 下 午 2:30:00'。 而 变量 options 的 对 象 实例 中 的 属性 year、month、day、hour、 
minute、second、hour12 与 timeZone， 会 影响 被 返回 的 字符 串 的 日 期 与 时 间 格 式 。 


14.2.3 ”语言 敏感 的 数值 格式 (ECMA-402) 


通过 构造 函数 Intl.NumberFormat(), 可 进一步 获取 语言 敏感 的 特定 数值 格式 的 字符 串 。 请 参看 
如 下 示例 。 
【14-2-3-Intl-NumberFormat.js】 


let number = 352591.8 ; 
let result = new Intl.NumberFormat ('en').format (number) ; 


console.log (result) ; 
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result = new Int1.NumberFormat ('cn', {style: 'currency', currency: 'cny'}).format (number) ; 


console.log (result) ; 


【相关 说 明 】 

let number = 352591.8 ; 

声明 初始 值 为 332591.8 的 变量 number。 

let result = new Int1.NumberFormat ('en').format (number) ; 

此 语句 声明 了 变量 result， 其 初始 数据 为 英文 (en) 数值 格式 的 字符 串 '352,591.8'"。 其 中 ， 
IntLNumberFormat('en)， format(number) 会 返回 【在 变量 number 中 ， 其 数值 352591.8】 的 英文 数值 
格式 的 字符 串 '352,591.8'。 


console.log(result) ; 


result = new Int1.NumberFormat ('cn', {style: 'currency', currency: 'cny'}).format (number) ; 

此 语句 声明 了 变量 result， 其 初始 数据 为 中 文 〈cn) 货 币 数值 格式 的 字符 串 'CNY¥352,591.80'。 
Intl.NumberFormat('cn', {style: 'currency', currency: 'cny'} ).format(number) 会 返回 【在 变量 number 中 ， 
其 数值 352591.8】] 的 中 文 货币 数值 格式 的 字符 串 'CN¥352,591.80'。 其 中 , 子 对 象 实例 {style: 'currency', 
currency: 'cny 中 的 属性 style 与 currency， 会 影响 被 返回 的 字符 串 的 货币 数值 格式 。 


14.2.4 ”返回 规范 化 语言 环境 名 称 (ECMA-402) 


通过 函数 Intl.getCanonicalLocales()， 可 进一步 获取 特定 规范 化 语言 环境 名 称 (canonical locale 
names) 。 请 参看 如 下 示例 。 
【14-2-4-Intl-getCanonicalLocales.js】 


let locale = Int1.getCanonicalLocales('zh-cn') ; 
console.log (locale) ; 


locale = Intl.getCanonicalLocales('en-us') ; 
console.log(locale) ; 


locale = Intl.getCanonicalLocales('en-uk') ; 
console.log (locale) ; 


locale = Intl.getCanonicalLocales('en kk') ; 
console.log (locale) ; 


【相关 说 明 】 


let locale = Intl.getCanonicalLocales('zh-cn') ; 


Intl.getCanonicalLocales('en-cnn) 会 返回 ["en-CN"]。 所 以 ， 此 语句 声明 了 变量 locale， 其 初始 数 
据 为 数组 实例 ["zh-CN"]， 并 内 含 规范 化 语言 环境 名 称 (canonical locale name ) 的 字符 串 "zh-CN"。 


console.log(locale) ; 
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locale = Int1l.getCanonicalLocales ('en-us') ; 
Intl.getCanonicalLocales('en-us') 会 返回 ["en-US"]。 所 以 ， 此 语句 将 内 含 规范 化 语言 环境 名 称 的 
字符 串 "en-US" 的 数组 实例 ["en-US"]， 赋 给 变量 locale。 


console.log(locale) ; 


locale = Intl.getCanonicalLocales('en-uk') ; 


Intl.getCanonicalLocales('en-uk'") 会 返回 ["en-UK"]。 所 以 ， 此 语句 将 内 含 规范 化 语言 环境 名 称 的 
字符 串 "en-UK" 的 数组 实例 ["en-UK"]， 赋 给 变量 locale。 


console.log(locale) ; 


locale = Intl.getCanonicalLocales('en kk') ; 


字符 串 'en-kk' 并 非 语 言 环境 名 称 ， 所 以 IntLgetCanonicalLocales('en-kk) 会 产生 【Uncaught 
RangeError: Invalid language tag: en_kk at Object.getCanonicalLocales (native) 】 的 错误 信息 。 


14.3 ”window.navigator 对 象 实例 


window.navigator 对 象 实例 ， 可 简写 为 navigator 对 象 实例 ， 其 函数 和 属性 ， 可 用 来 返回 浏览 器 
的 相关 情报 或 者 当前 地 理 位 置 的 相关 数据 。 


14.3.1 获取 浏览 器 相关 信息 


在 windows.navigator 对 象 实例 中 ， 其 所 有 属性 和 一 些 函 数 ， 均 会 返回 浏览 器 的 相关 信息 。 请 
参看 如 下 示例 。 


【14-3-1-browser-information.js 


// console.log (window.navigator.cookieEnabled) ; 
console.log (navigator.cookieEnabled) ; 
console.1log (navigator .onLine) ; 

console.log (navigator.javaEnabled()) ; 
console.1l0g('') ; 


// console.log (window.navigator.appCodeName) ; 
console.1log (navigator.appCodeName) ; 
console.1log (navigator.appName) ; 
console.10g('') ; 


console .1log (navigator.appVersion) ; 
console.1log (navigator.userAgent) ; 
console.1log('') ; 


console.1log (navigator.platform) ; 
console.log (navigator.product) ; 
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Console.1log('') ; 


console.1log (navigator .language) ; 


【相关 说 明 】 


// console.log (window.navigator .cookieEnabled) ; 
console.1log (navigator.cookieEnabled) ; 


在 navigator 对 象 实例 中 ， 其 属性 cookieEnabled 的 数据 ， 若 为 布尔 值 tue， 则 意味 着 浏览 器 支 
持 的 cookie 机 制 ， 当 前 处 于 开启 状态 。 

console.log (navigator.onLine) ; 

在 navigator 对 象 实例 中 ， 其 属性 onLine 的 数据 ， 若 为 布尔 值 tue， 则 意味 着 浏览 器 当前 处 了 
在 线 (on-line) 状态 ， 反 之 ， 则 处 于 离线 (offline) 状态 。 

console.1og (navigator.javaEnabled()) ; 

在 navigator 对 象 实例 中 ， 其 属性 javaEnabled 的 数据 ， 若 为 布尔 值 tue， 则 代表 浏览 器 支持 
Java applet 处 理 机 制 ， 当 前 处 于 开启 状态 。 


console.1log('') ; 


UH 


Hl 


心 


// console.log (window.navigator.appCodeName) ; 
console.log (navigator.appCodeName) ; 


在 navigator 对 象 实例 中 ， 其 属性 appCodeName 会 返回 浏览 器 的 代码 名 称 (code name) ， 例 
如 Mozilla。 

console.1log (navigator .apPName) ; 

在 navigator 对 象 实例 中 ， 其 属性 appName 会 返回 浏览 器 的 应 用 名 称 (application name) ， 例 
如 Netscape。 


console.1log('') ; 


console .log (navigator.appVersion) ; 

在 navigator 对 象 实例 中 ， 其 属性 appVersion 会 返回 浏览 器 的 应 用 版 本 (application version) ， 
例如 【5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) 
Chrome/70.0.3538.110 Safari/537.36】 。 


console.1log (navigator.userAgent) ; 

在 navigator 对 象 实例 中 ， 其 属性 userAgent 会 返回 浏览 器 的 用 户 代 理 (user agent) 的 相关 数 
据 ， 例 如 【Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) 
Chrome/70.0.3538.110 Safari/537.36】 。 


console.10g('') ; 


console.log (navigator.platform) ; 
在 navigator 对 象 实例 中 ， 其 属性 platform 会 返回 浏览 器 所 在 的 操作 平台 (platform) 的 版 本 ， 
例如 【Win32】。 
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console .1log (navigator .product) ; 


在 navigator 对 象 实例 中 ， 其 属性 product 会 返回 浏览 器 的 引擎 的 产品 (product) 名 称 ， 例 如 
【Gecko】 。 


console.1o0g('') ; 


console.1log (navigator.language) ; 

在 navigator 对 象 实例 中 ， 其 属性 language 会 返回 浏览 器 当前 被 设置 的 界面 语言 (language) 
的 版 本 ,例如 代表 简体 中 文 的 【zh-CN】。 

根据 官方 的 建议 ，navigator 对 象 实例 中 的 属性 appCodeName、appName、appVersion 、product 
已 经 不 合 时 宜 了 ， 所 以 应 避免 使 用 。 


14.3.2 ”获取 当前 地 理 定 位 相关 数据 


window.navigator.geolocation 对 象 实例 ， 可 被 简写 为 navigator.geolocation 对 象 实例 ， 其 属性 和 
函数 可 返回 当前 地 理 位 置 的 相关 数据 。 请 参看 如 下 示例 。 


【14-3-2-navigator-geolocation.js】 


let options = {maximumAge: 0, timeout: 7000, enableHighAccuracy: true} ; 


function succeed (position) 
{ 
with (position.coords) 
{ 
let message = “Current location:\n\tLatitude = ${latitude}\n\tLongitude = 
${longitude} \n\tdistance accuracy = ${accuracy}meters. ; 
///Latitude = ??? 
///Longitude = ??? 
///distance accuracy = ??? meters 
console.log(message) ; 
} 
i 


function fail (error) 
{ 

console.warn(‘${error.code}: ${error.message}.) ; 
Px 


navigator.geolocation.getCurrentPosition(succeed, fail, options) ; 


【相关 说 明 】 

let options = {maximumAge: 0, timeout: 7000, enableHighAccuracy: true} ; 

此 语句 声明 了 变量 options, 其 初始 数据 为 内 含 3 个 属性 的 对 象 实例 。 其 中 , 属性 maximumAge 
用 来 设置 可 允许 沿用 前 一 个 地 理 位 置 的 暂 存 数据 的 间 隐 毫秒 数 。 若 其 间隔 毫秒 数 为 0， 则 意味 着 浏 
览 器 应 该 立即 返回 当前 地 理 位 置 的 数据 ， 而 不 是 沿用 前 一 个 暂 存 数据 。 属 性 timeout 用 来 设置 可 多 
许 访问 当前 地 理 位 置 的 逾 时 毫秒 数 ， 在 此 被 设置 为 7000 毫秒 〈7 秒 ) 内 ， 若 用 户 仍然 没有 回复 ， 


五 
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则 浏览 器 无 权 访问 当前 的 地 理 位 置 。 
在 浏览 器 所 在 的 计算 机 或 者 移动 设备 ， 支 持 高 准确 率 (high accuracy) 的 定位 机 制 的 前 提 下 ， 
若 其 属性 enableHighAccuracy 的 数据 为 布尔 值 tue， 则 启动 高 准确 率 (high accuracy) 的 定位 机 制 。 


function succeed (Position) 
{ 


with (Position.coords) 
在 此 ， 为 了 简化 源 代码 ， 通 过 语法 【with (position.coords)】， 使 得 position.coords.latitude、 
position.coords.longitude 与 position.coords.accuracy， 可 在 其 下 方 的 大 括号 内 ， 被 精简 成 为 latitude、 
longitude 和 accuracy。 


{ 


let message = “Current location:\n\tLatitude = ${latitude}\n\tLongitude = 
${longitude} \n\tdistance accuracy = S${accuracy}meters. ; 


此 语句 声明 了 局 部 变量 message， 其 初始 数据 为 类 似 如 下 被 格式 化 的 字符 串 : 
Current location: 
Latitude = XX.XXXXXXXXXXXXXXX 


Longitude = XXX.XXXXXXX 
distance accuracy = XXXX meters 


其 中 ，"\n' 代 表 换 行 (line feed) 字符 ，At 代 表 制 表 (tab) 字符 。 


console.log(message) ; 
} 


Ks 
上 述 语法 定义 了 带 有 参数 position 的 函数 succeed()。 


function fail (error) 


{ 
console.warn(‘${error.code}: ${error.message}’) ; 

此 语句 显示 出 内 含 错误 代码 与 原因 的 错误 信息 ,例如 [ 1: User denied Geolocation 或 [3: Timeout 
expired】。 

Ps 

上 述 语法 定义 了 带 有 参数 error 的 函数 fail()。 

navigator.geolocation.getCurrentPosition(succeed, fail, options) ; 

此 语句 启动 了 浏览 器 支持 的 定位 机 制 。 启 动 时 ， 会 出 现 询 问 用户 是 否 允许 的 信息 对 话 框 ， 例 
如 带 有 信息 【http://XXX.XXX.XXX 想 要 获取 您 的 位 置 ， 允 许 或 禁止 ?】 的 对 话 框 。 此 时 ， 若 用 户 
单 击 【 允许】 按钮 ， 则 名 称 为 succeed 的 函数 会 被 调用 ; 若 用 户 单 击 【禁止 】 按 钮 ， 或 逾 时 未 按 下 
任何 按钮 ， 则 名 称 为 fail 的 函数 会 被 调用 。 
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在 此 语句 中 ,变量 名 称 options， 成 为 了 内 署 函 数 navigator.geolocation.getCurrentPosition() 的 第 
3 个 参数 数据 。 对 于 浏览 器 处 理 当 前 地 理 位 置 的 机 制 而 言 ， 变 量 options 的 对 象 实例 ， 可 用 来 设置 
其 暂 存 数据 的 间隔 毫秒 数 、 允 许 访问 当前 地 理 位 置 的 逾 时 毫秒 数 和 高 准确 率 的 定位 机 制 等 特征 。 


14.4 练 习 题 


1. 已 知 存在 初始 数据 为 对 象 实例 {type: 'english', weekday: 0} 的 变量 one_day， 试 通过 Proxy 对 
象 的 访问 代理 机 制 ， 编 写 JavaScript 源 代码 ， 以 实现 如 下 功能 : 

当 one_day.weekday 的 数值 为 1 至 7 的 整数 值 时 ， 让 console.log(one_day.weekday) 显 示 出 对 应 
的 "星期 一 至 ' 星 期 日 其 中 一 个 字符 串 。 

2. 承 上 题 ， 通 过 Proxy 对 象 的 访问 代理 机 制 ， 编 写 JavaScript 源 代码 ， 以 实现 如 下 功能 : 

当 one_day.weekday 的 数值 为 1 至 7 的 整数 值 ， 并 且 one_day.type 的 数据 字符 串 为 'english' 时 ， 
让 console.log(one_day.weekday) 显 示 出 对 应 的 "Monday' 至 'Sunday' 其 中 一 个 字符 串 。 


第 15 齐 


window.document 对 象 实例 


window.document 对 象 实例 ， 可 被 简写 为 document 对 象 实例 ， 即 代表 当前 网 页 中 的 根 节点 实 
例 ， 并 且 被 内 置 了 许多 【处 理 各 个 后 代 节 点 实例 】 的 属性 和 函数 。 本 章 通 过 许多 示例 的 讲解 ， 谈 及 
对 象 实例 的 使 用 。 


15.1 返回 焦点 所 在 的 元 素 


属性 document.activeElement 可 返回 当前 焦点 〈focus) 所 在 的 元 素 实 例 。 请 参看 如 下 示例 。 


【15-1-^-document-activeElement.html】 


<!DOCTYPE html> 
<html> 
<head> 
<title>document activeElement</title> 
<style> 
input, button, select 
{ 
font-size: 1.2em; 
margin: Spx ; 
} 
</style> 
</head> 
<body> 
<form id="form01" name="form01" style="text-align: center;"> 
<h3> 个 人 资料 </h3> 
<input type="text" id="username" name="username" placeholder="username" size="16" required> 
<input type="password" id="password" name="password" placeholder="password" size="16" 
required> 
<p></p> 
<select id="select01" name="select01"> 
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<option value="">choice of day-off</option> 
<option value="0">Sunday</option> 
<option value="1">Monday</option> 
<option value="2">Tuesday</option> 
<option value="3">Wednesday</option> 
<option value="4">Thursday</option> 
<option value="5">Friday</option> 
<option value="6">Saturday</option> 
</select> 
<input type="search" id="search" name="search" Placeholder="job category.." size="9"> 


<p></p> 
<button type="submit" id="Login btn">Login</button> 
<button type="reset" id="reset btn">Reset</button> 
</form> 
</body> 
<script> 
form01.onclick = function (event) 
{ 
with (document .activeElement) 
{ 
console.log(‘Tag name = ${tagName}, id = $ftid}j ) 7 
} 
Fg 
</script> 
</html> 


【相关 说 明 】 
<script> 


form01.onclick = function (event) 


{ 


with (document .activeElement) 
{ 

console.log( “Tag name = ${tagName}, id = S$fid} ) 
} 


通过 此 语法 ,使 得 代表 特定 子 元 素 实例 的 标签 名 称 (tag name ) /元 素 名 称 的 
document.activeElementtagName， 在 其 大 括号 里 ， 可 被 简化 成 为 tagName; 而 代表 特定 子 元 素 实例 
的 属性 id 的 documentactiveElementid ， 在 其 大 括号 里 ， 则 可 被 简化 成 为 id。 其 中 ， 
document.activeElement 会 返回 【在 当前 网 页 中 ， 其 获取 焦点 (focus)】 的 元 素 实例 。 在 此 ， 被 单 击 
的 元 素 实 例 ， 即 会 获得 焦点 。 

Re 


上 述 语法 将 带 有 参数 event 的 匿名 函数 的 定义 , 赋 给 属性 id 的 数据 为 form01' 的 form 元 素 实例 
的 属性 onclick。 在 form 元 素 实 例 的 范围 内 , 任何 子 元 素 实例 被 单 击 时 ， 上 述 匿名 函数 就 会 被 调用 ， 
使 得 类 似 【Tag name = SELECT, id = select01】 的 信息 ， 被 显示 在 浏览 器 的 调试 工具 【Console】 面 
板 里 。 
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15.2 ”附加 事件 处 理 器 至 特定 元 素 


通过 内 置 的 全 局 函数 addEventListener()， 可 在 特定 元 素 实例 上 ， 附 加 作为 
handler) 的 自 定义 函数 。 请 参看 如 下 示例 。 


【15-2-^-DOM-addEventListener.html]】 


<!DOCTYPE html> 
<html> 
<head> 
<title>DOM addEventListener()</title> 
<style> 
input, button, select 
{ 
font-size: 1.2em ; 


件 处 理 器 (event 


margin: 5px ; 

} 

</style> 
</head> 
<body> 
<form id="form01" name="form01" style="text-align: center;"> 

<h3> 个 人 资料 </h3> 

<input type="text" id="username" name="username" placeholder="username" size="16" required> 

<input type="password" id="password" name="password" placeholder="password" size="16" 
required> 

<p></p> 

<select id="select01" name="select01"> 
<option value="">choice of day-off</option> 
<option value="0">Sunday</option> 
<option value="1">Monday</option> 
<option value="2">Tuesday</option> 
<option value="3">Wednesday</option> 
<option value="4">Thursday</option> 
<option value="5">Friday</option> 
<option value="6">Saturday</option> 

</select> 

<input type="search" id="search" name="search" placeholder="job category.." size="9"> 


<p></p> 
<button type="submit" id="Login btn">Login</button> 
<button type="reset" id="reset btn">Reset</button> 
</form> 
</body> 
<script> 
function display (event) 
{ 
with (document .activeElement) 
{ 
console.log(‘Tag name = ${tagName}, id = S$Sfidj ) 
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// form01.addEventListener('click', display, true) ; 
form01.addEventListener('click', display, {capture: true}) ; 


function warning (event) 
{ 

console.log('Username field is clicked.') ; 
} 


username.addEventListener('click', warning) ; 


/1/1 
function only once message(event) 


{ 
console.1log('Password field is clicked.') ; 


} 


Password.addEventListener('click', only once message, {once: true}) ; 
</script> 
</html> 


【相关 说 明 】 


<script> 


function display (event) 
{ 

with (document .activeElement) 

{ 

console.log( Tag name = ${tagName}, id = S$fidl `) »; 

} 

} 
上 述 语 法 定义 了 带 有 参数 event 的 函数 display()。 

// form01.addEventListener('click', display, true) ; 
form01.addEventListener('click', display, {capture: true}j) ; 

此 语句 通过 调用 函数 addEventListener()， 使 得 属性 id 的 数据 为 form01' 的 form 元 素 实例 ， 被 
监听 着 单 击 (click) 动作 。 一 旦 属性 id 的 数据 为 form01' 的 form 元 素 实 例 被 单 击 时 ， 名称 为 display 
函数 就 会 被 调用 ， 进 而 显示 出 类 似 【Tag name = INPUT, id = username】 的 信息 。 

在 此 ，form01.addEventListener('click', display, {capture: true}) 和 form01.addEventListener('click', 
display, true) 是 等 价 的 语法 。 
传 入 函数 addEventListener() 的 第 3 个 参数 的 数据 {capture: true} 或 true, 是 用 来 设置 特定 事件 的 
捕获 〈capture) 流程 ， 使 得 进行 属性 id 的 数据 为 'form01' 的 form 元 素 实例 本 身 的 事件 处 理 之 后 ,会 
再 被 进行 其 子 元 素 实例 的 事件 处 理 。 
若 属性 id 的 数据 为 msername' 的 input 元 素 实例 被 单 击 时 , 则 会 先进 行 属性 id 的 数据 为 'form0l' 
的 form 元 素 实例 的 事件 处 理 ; 然后 在 显示 出 【Tag name = INPUT, id = username】 的 信息 之 后 ， 接 
着 才 会 进行 属性 id 的 数据 为 "username' 的 input 元 素 实 例 的 事件 处 理 ， 并 显示 出 【Usemame field is 
clicked.】 的 信息 。 


function warning (event) 


{ 
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console.log('Username field is clicked.') ; 
} 


上 述 语法 定义 了 带 有 参数 event 的 函数 waming()。 
username.addEventListener('click', warning) ; 


此 语句 通过 调用 函数 addEventListener()， 使 得 属性 id 的 数据 为 "username' 的 input 元 素 实例 ， 
会 被 监听 着 单 击 (click) 动作 。 一 旦 属性 id 的 数据 为 "username' 的 input 元 素 实例 被 单 击 时 ， 名 称 为 
warmning 的 函数 就 会 被 调用 ， 进 而 显示 出 类 似 【Username field is clicked.】 的 信息 。 

function only once _ message (event) 
{ 


console.1log('Password field is clicked.') ; 
} 


上 述 语法 定义 了 带 有 参数 event 的 函数 only_once_message()。 
password.addEventListener('click', only once message, {once: true}) ; 
此 语句 通过 调用 函数 addEventListener()， 使 得 属性 id 的 数据 为 'password' 的 input 元 素 实例 ， 
会 监听 着 单 击 (click) 动作 。 一 旦 属性 id 的 数据 为 password' 的 input 元 素 实例 被 单 击 时 ， 名 称 为 
only_once_message 的 函数 就 会 被 调用 ,进而 显示 出 类 似 【Password field is clicked.】 的 信息 。 其 中 ， 
其 第 3 个 参数 的 数据 【 {once: true}】， 是 用 来 限制 其 单 击 事件 ， 仅 会 被 处 理 1 次 而 已 ! 


15.3 ”收养 特定 节点 


通过 函数 document.adpotNode()， 使 得 在 当前 网 页 中 ,特定 节点 实例 会 被 收养 到 其 他 节点 实例 
中 ， 或 者 代表 子 网 页 的 iframe 元 素 实例 里 的 节点 实例 中 。 请 参看 如 下 示例 。 


【15-3-^-document-adoptNode.html】 


<!DOCTYPE html> 
<html> 
<head> 
<title>documentadoptNode</title> 
<style> 
[id^=ul] 
{ 
border-radius: 5px ; 
color: RoyalBlue ; 
width: 100px ; 
text-align: center ; 
padding: Spx ; 
list-style-type: none ; 
background-color: Gold ; 
margin: 20px ; 
display: inline-block ; 


#u102 
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【相关 说 明 】 


声明 初始 数据 为 空 值 Cnull) 的 变量 temp。 


此 语句 将 当前 eventtarget 所 代表 的 下 元 素 实例 ， 赋 给 变量 temp。 


此 语句 将 变量 temp 的 元 素 实例 ， 新 增 至 属性 id 的 数据 为 ul02' 的 ul 元 素 实例 中 。 


上 述 语 法 定义 了 带 有 参数 event 的 函数 select_item()。 


392 | Javascript 编程 思想 : 从 ES5 到 ES9 


ul01.addEventListener('click', select item) ; 


此 语句 通过 调用 函数 addEventListener(), 使 得 
单 击 (click) 动作 。 一 旦 属性 id 的 数据 为 "ul01' 的 ul 元 素 实例 被 单 击 时 ， 名 称 为 select_item 的 函数 


就 会 被 调用 ， 进 而 让 特定 fi 元素 实例 ， 从 


数据 为 ul02' 的 ul 元 素 实例 中 。 


属性 id 的 数据 为 ul01' 的 ul 元 素 实例 ， 会 监听 着 


属性 id 的 数据 为 ml01' 的 元 素 实例 内 ， 被 移植 到 属性 id 的 


15.4 返回 所 有 锚 点 元 素 构 成 的 集合 


通过 属性 document.anchors， 可 返回 【在 当前 网 页 中 ， 带 有 属性 name 而 代表 锚 点 (anchor)】 
的 所 有 a 元素 实例 的 集合 。 请 参看 如 下 示例 。 


【15-4-^-document-anchors.html】 


<!DOCTYPE html> 
<html> 
<head> 


<title>documentanchors</title> 


<style> 
[id^=div] 
{ 
display: block ; 
height: 500px ; 
} 


#div01{ background-color: 
#div02{ background-color: 
#div03{ background-color: 
#div04{ background-color: 
#div05{ background-color: 


</style> 

</head> 

<body> 
<a href="#a01">To a01</a> 
<a href="#a02">To a02</a> 
<a href="#a03">To a03</a> 
<a href="#a04">To a04</a> 
<a href="#a05">To a05</a> 
<p></p> 


<a name="a01">a01</a> 
<div id="div01"> 


</div> 


<a name="a02">a02</a> 
<div id="div02"> 


</div> 


Gold ; } 

GreenYellow 
YellowGreen 
RoyalBlue ; 
Chocolate ; 
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<a name="a03">a03</a> 
<div id="div03"> 


</div> 

<a name="a04">a04</a> 
<div id="div04"> 
</div> 

<a name="a05">a05</a> 
<div id="div05"> 


</div> 
</body> 
<script> 
let anchors = document .anchors ; 


console.log(anchors) ; 
</script> 
</html> 


【相关 说 明 】 


<script> 


let anchors = document .anchors ; 

此 语句 声明 了 变量 anchors， 其 初始 数据 为 【在 当前 网 页 中 ， 带 有 属性 name 的 a 元 素 实 例 】 
的 集合 ， 例 如 【<a name="a01">a01</a>】~【<a name="a05">a05</a>】。 在 网 页 上 ， 这 种 带 有 属性 
name 及 其 数据 的 a 元 素 实例 ， 可 被 称 为 锚 点 (anchor) 。 

console.log(anchors) ; 

此 语句 显示 出 一 组 可 展开 的 信息 ， 代 表 当 前 网 页 中 的 a 元 素 实例 的 集合 。 举 例 来 说 ， 当 【<a 
href="#a03">To a03</a>】 所 代表 的 超 链 接 ， 被 单 击 时 ， 浏 览 器 并 不 会 跳 转 至 其 他 网 页 ， 而 是 滚动 
至 当前 网 页 的 【<a name="a03">a03</a>】 所 代表 的 锚 点 位 置 ! 

请 留意 ,代表 超 链接 的 a 元 素 实例 , 带 有 属性 href 及 其 数据 字符 串 "# 圭 定 锚 点 名 称 " 或 者 "特定 
网 址 ", 例 如 【hre 伍 "#a03"】 或 者 【hre 住 "http://www.tup.tsinghua.edu.cn"】; 而 代表 销 点 的 a 元 素 实 
例 ， 则 带 有 属性 name 及 其 数据 " 锚 点 名 称 "， 例 如 【name="a03"】。 


15.5 ”返回 当前 网 址 的 相关 属性 


在 window.document 对 象 实例 中 ， 存 在 多 个 可 返回 当前 网 址 的 多 个 属性 ， 例 如 属性 
documentURI、baseURI 与 URL。 此 外 ，window.location.href 亦 可 返回 当前 网 址 。 请 参看 如 下 示例 。 


【15-5-^-web-addresses.js】 


console.1log (document .documentURI) ; 
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console.log (document.baseURI) ; 
console.log (document.URL) ; 


// readable and writable 
console.1log(location.href) ; 


【相关 说 明 】 


console.1log (document .documentURI) ; 
console.1log (document .baseURI) ; 
console.log (document .URL) ; 


这 3 个 语句 中 的 document.documentURI、 document.baseURI 与 document.URL, 均 为 具 读 (read 


only) 属性 ， 可 返 
者 【http://www.tup.tsinghua.edu.cn】。 


// readable and writable 
console.log(location.href) ; 


location.href 是 可 读 与 可 写 (readable and writable) 的 属性 ， 也 可 返回 


网 址 。 


当前 网 页 所 在 的 路 径 或 网 址 ， 例 如 【file:///D:/examples/htmlijs_tester.html】 或 


当前 网 页 所 在 的 路 径 或 


15.6 在 当前 网 页 中 动态 生成 HTML 源 代码 


通过 函数 document.open()、document.write()、document.writeln() 和 document.close()， 可 动态 生 
成 浏览 器 可 执行 的 HTML 源 代码 ， 成 为 当前 网 页 里 的 源 代码 的 一 部 分 。 请 参看 如 下 示例 。 


【15-6-^-dynamically-writing-HTML-codes-on-document-body.js】 


document .open() ; 


document .writeln('<hr color="Green">') ; 
document .write('<br>') ; 


document .write('<div align="center">Time is money.</div>') 


document .write('<br>') ; 


document .writeln('<hr color="Cyan">') ; 


document .close() ; 


document .body. style.backgroundColor = 'YellowGreen' ; 


document .body .innerHTML += '<hl style="color: RoyalBlue; t 


World Peace...</hl>' ; 


console.log (document.body) ; 

/// <hr color="Green"> 

/// <br> 

/// <div align="center">Time is money.</div> 
/// <br> 


center"> 
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/// <hr color="Cyan"> 

/// <hl style="color: RoyalBlue; text-align: center">World Peace...</hl1> 
/// </body> 

console.10og('') ; 


【相关 说 明 】 


document .open () ; 

此 语句 用 来 开启 一 个 输出 流 ， 以 便 收集 后 续 通 过 调用 document.write( 代 表 特 定 HTML 源 代码 
片段 的 字符 串 ) 或 document.writeln( 代 表 特 定 HTML 源 代码 片段 的 字符 串 )， 而 被 输出 的 字符 串 。 

document .writeln('<hr color="Green">') ; 

此 语句 通过 调用 document.writeln( 代 表 特 定 HTML 源 代码 片段 的 字符 串 ), 可 将 特定 HTML 源 
代码 片段 ， 动 态 输出 至 网 页 里 ， 成 为 源 代码 的 一 部 分 。 浏 览 器 会 在 此 语句 之 后 的 位 置 ， 动 态 生 成 
HTML 源 代码 片段 【<hr color="Green">】， 进 而 在 当前 网 页 上 ， 叶 现 一 条 绿色 (green) 的 水 平 线 


(horizon) 。 


document .write('<br>') ; 
此 语句 使 得 浏览 器 在 此 语句 之 后 的 位 置 ， 动 态 生 成 HTML 源 代码 片段 【<br>】， 进 而 在 网 页 
完成 在 视觉 上 的 断 行 (break) / 换行 (line feed) 。 
document .write('<div align="center">Time is money.</div>') : 
此 语句 使 得 浏览 器 在 此 语句 之 后 的 位 置 ， 动 态 生 成 HTML 源 代 码 片段 【<div 
align="center">Time is money.</div>】， 进 而 在 当前 网 页 上 ， 呈 现 带 有 居中 对 齐 (center align) 的 文 
本 【Time is money.】 的 div 元 素 实 例 。 

document .write('<br>') ; 
语句 使 得 浏览 器 在 此 语句 之 后 的 位 置 ， 动 态 生成 HTML 源 代码 片段 【<br>】， 进 而 在 当前 
网 页 上 ， 完 成 在 视觉 上 的 断 行 。 
document .writeln('<hr color="Cyan">') ; 
此 语句 使 得 浏览 器 在 此 语句 之 后 的 位 置 ， 动 态 生 成 HTML 源 代码 片段 【<hr color="Cyan">】， 
进而 在 当前 网 页 上 ， 呈 现 一 条 青色 〈cyan) 的 水 平 线 (horizon)。 

document .close() ; 
此 语句 用 来 关闭 输出 流 ， 并 正式 呈现 【document.write() 和 document.writeln0 所 动态 生成 】 的 各 
个 HTML 源 代码 片段 。 
document .body. style.backgroundColor = 'YellowGreen' ; 
此 语句 设置 了 当前 网 页 的 背景 颜色 为 黄 绿色 (yellow green) 。 


document .body.innerHTML += '<hl style="color: RoyalBlue; text-align: center"> 
World Peace...</hl>' ; 


此 语句 在 当前 网 页 的 body 元 素 实例 中 ,新 增 带 有 宝蓝 色 (RoyalBlue) 、 居 中 对 齐 (text-align: 
center) 的 文本 【World Peace…】 的 hl 元 素 实 例 。 


已 
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console.log (document.body) ; 


此 语句 显示 出 【可 被 展开 】 的 body 元 素 实例 本 身 的 源 代 码 片 段 。 展 开 之 后 ， 可 进一步 看 到 如 
下 body 元 素 实例 中 的 源 代码 片段 : 


<body style="background-color: yellowgreen;"> 

<hr color="Green"> 

<br> 

<div align="center">Time is money.</div> 

<br> 

<hr color="Cyan"> 

<hl style="color: RoyalBlue; text-align: center"> World Peace.…</h1> 
</body> 


15.7 ”内 含 特定 服务 器 相关 数据 的 cookie 


所 谓 的 cookie， 并 不 是 真 的 指 饼干 ， 而 是 指 网 站 服务 器 借助 客户 端的 浏览 器 ， 存 储 于 客户 端 
的 相关 数据 的 小 型 文档 ， 以 便 加 速 客 户 端 日 后 和 网 站 服务 器 的 连接 。 关 于 内 含 相关 数据 的 cookie 
的 调试 ， 可 参看 如 下 示例 。 


【15-7-^-document-cookie.html]】 


<!DOCTYPE html> 
<html> 
<head> 
<title>document cookie</title> 
</head> 
<body> 
</body> 
<script> 


console.log(document.cookie) ; 
console.log('') ; 


let future date = new Date() ; 
future date.setTime (future date.getTime() +1* 60* 60 *1000); 


document .cookie = 'username=jasper337' ; 
document .cookie = 'ip address=11]1 .222.333.777'+' ; expires= '+ future date.toUTCString(); 


console.log(document.cookie) ; 
console.1og('') ; 


document .cookie = 'username=; expires=Thu, 01 Jan 1970 00:00:00 GMT' ; 
document .cookie = 'ip address=; expires=Thu, 01 Jan 1970 00:00:00 GMT' ; 


console.log(document.cookie) ; 
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</script> 
</html> 


【相关 说 明 】 


<script> 


console.1og (document .cookie) ; 
通过 HTTP 或 HTTPS 协议 , 浏览 器 连接 至 特定 网 站 服务 器 的 当前 网 页 的 文档 时 ， 当 前 网 页 中 
的 document.cookie， 会 返回 当前 网 页 的 相关 cookie 的 数据 字符 串 〈( 例 如 'usemame=jasper337; 
ip_address=111.222.333.777 ) 。 若 是 让 浏览 器 直接 打开 本 地 的 当前 网 页 ， 则 当前 网 页 中 的 
document.cookie 会 返回 空 字符 串 "。 


console.10g('') ; 


let future date = new Date() ; 
此 语句 声明 了 变量 future_date， 其 初始 数据 为 内 含 当前 日 期 与 时 间 的 Date 对 象 实例 。 
future date.setTime (future date.getTime() +1* 60* 60* 1000) 
此 语句 将 变量 future_date 的 Date 对 象 实例 中 的 时 间 ， 往 后 推移 1 小 时 (1 X 60 X 60 X 1000 
=3600000 毫秒 ) 。 


document .cookie = 'username=jasper337' ; 
document .cookie = 'ip_address=111.222.333.777'+' ; expires= '+ future date.toUTCString(); 


这 两 个 语句 在 当前 网 页 中 的 cookie 里 ， 新 增 了 数据 为 字符 串 jasper337' 的 参数 username， 以 及 
其 数据 为 字符 串 '111.222.333.777' 的 参数 ip_address。 

举例 来 说 ， 像 是 子 字符 串 【; expires=Sun, 2Dec 2018 19:27:17 GMT"】 的 部 分 ， 用 来 让 浏览 器 
知道 ， 参 数 ip_address 的 数据 字符 串 ， 在 协调 世界 时 的 时 间 点 【2018/12/2 19:27:17】 即 会 到 期 ， 并 
会 被 删除 。 


console.log(document.cookie) ; 


document.cookie 当前 返回 字符 串 username=jasper337; ip_address=111.222.333.777'。 


console.log('') ; 


document .cookie = 'username=; expires=Thu, 01 Jan 1970 00:00:00 GMT' ; 
document .cookie = 'ip_address=; expires=Thu, 01 Jan 1970 00:00:00 GMT' ; 


这 两 个 语句 会 使 得 在 当前 网 页 相关 的 cookie 里 , 其 参数 username 和 ip_address 的 数据 被 清空 。 
console.log(document .cookie) ; 


于 上 述 两 个 语句 中 ， 其 cookie 的 两 个 参数 的 数据 ， 均 已 经 被 清空 ， 所 以 document.cookie 当前 
会 返回 空 字符 串 "。 
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称 。 


文字 


例 。 


15.8 返回 当前 网 页 编码 字符 集 的 名 称 


五 


通过 属性 document.characterSet， 可 返 
请 参看 如 下 简短 的 示例 。 


【15-8-^-document-characterSet.js】 


console.log (document .characterSet) ; 


I 


document.characterSet 会 返 


当前 网 页 的 编码 字 


符 集 (encoding character set) 的 名 


当前 网 页 的 编码 字符 集 (encoding character set) 的 名 称 ， 例 如 
UTF-8 (Unicode Transformation Format - 8 bits)， 意 味 着 包括 字母 、 


数字 、 符 号 、 中 文 和 其 他 国家 的 


， 均 通过 1 到 4 组 【8 个 比特 位 (bit) 】， 被 加 以 编码 。 换 名 话说， 在 网 页 上 的 单一 文字 所 占 
用 的 内 存 空 间 ， 是 介 于 8 个 比特 位 (1 组 ) 到 32 个 比特 位 (4 组 ) 之 间 。 


15.9 创建 代表 新 属性 的 节点 


通过 document.createAttribute()， 可 创建 并 返回 【在 特定 元 素 实例 中 ， 代 表 新 届 性 】 的 节点 实 


请 参看 如 下 示例 。 
【15-9-^-document-createAttribute.js】 


let e01 = document .createElement('div') ; 


e01.id = 'div01' ; 
e01.innerHTML = 'A person who never made a mistake never 


e01.style.color = 'Gold' ; 
e01.style.backgroundColor = "RoyalBlue' ; 


// e01.title = 'word count = 11' »; 
let a01 = document.createAttribute('title') ; 


a0l.value = 'word count = 11" ) 
e0l.setAttributeNode(a01) ; 


document .body .appendChild(e01) ; 

【相关 说 明 】 

let e01 = document .createElement('div') ; 

此 语句 声明 了 变量 e01， 其 初始 数据 为 新 的 div 元 素 实例 。 
e01.id = 'div01' ; 

此 语句 将 字符 串 'div01'， 赋 给 变量 e01 的 div 元 素 实例 中 的 


e01.innerHTML = 'A person who never made a mistake never 


tried anything new.' ; 


属性 id。 


tried anything new.' ; 
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语句 将 字符 串 'A person who never made a mistake never tried anything new."， 赋 给 变量 e01 的 
div 元 素 实例 中 的 属性 innerHTML， 进 而 使 得 上 述 字符 串 ， 呈 现在 div 元 素 实例 的 范围 内 。 
e01.style.color = 'Gold' ; 

将 字符 串 'Gold'， 赋 给 变量 e01 所 代表 的 div 元 素 实例 的 属性 style.color， 使 得 此 div 元 素 实例 
中 的 文本 在 网 页 上 呈现 出 金色 (gold) 字体 。 

e01.style.backgroundColor = "RoyalBlue' ; 

将 字符 串 'RoyalBlue'"， 赋 给 变量 e01 所 代表 的 div 元 素 的 属性 style.backgroundColor， 使 得 此 
div 元 素 实例 的 背景 颜色 在 网 页 上 呈现 为 宝蓝 色 (royalblue) 。 


// e01.title = 'word count = 11' ; 
let a01 = document .createRttribute('title') ; 


此 语句 声明 了 变量 a01， 其 初始 数据 是 【在 特定 元 素 实例 中 ,其 名 称 为 title】 的 属性 (attribute) 
的 节点 实例 。 

a01.value = 'word count = 11' : 

此 语句 将 字符 串 'word count = 11， 赋 给 【在 变量 a01 所 代表 的 名 称 为 title 的 属性 节点 实例 中 ， 
其 名 称 为 value】 的 属性 。 

请 留意 ， 在 HTML 编程 语言 里 ， 特 定 元 素 实例 的 属性 (attribute ) 在 英文 中 ， 称 为 attribute; 
在 JavaScript 编程 语言 里 ， 特 定 对 象 实例 的 属性 (property) 在 英文 中 ， 称 为 property。 

e01.setRttributeNode(a01) ; 

此 语句 将 变量 a01 所 代表 的 名 称 为 title 的 属性 (attribute》 节 点 实例 ， 设 置 成 为 变量 e01 所 代表 的 
div 元 素 实例 的 属性 tile。 执 行 完 此 语句 之 后 ， 浏 览 器 会 在 当前 网 页 里 ， 动 态 生 成 上 述 div 元 素 实例 的 
如 下 源 代码 : 


<div id="div0]1l" style="color: gold; background-color: royalblue;" title="word count = 11"> 


A person who never made a mistake never tried anything new.</div> 
由 此 可 看 出 , 在 上 述 div 元 素 实 例 中 , 带 有 属性 title 及 其 数据 字符 串 '"word count = 11'， 使 用 户 
将 鼠标 指针 ， 移 入 div 元 素 实例 的 范围 内 时 ， 便 会 出 现 提示 信息 【word count= 11】。 
document .body .appendChild(e01) ; 
此 语句 将 变量 e01 所 代表 的 div 元 素 实例 ， 新 增 至 body 元 素 实例 中 。 执 行 此 语句 之 后 ， 浏 览 
器 会 将 变量 e01 所 代表 div 元 素 实例 ， 正 式 显示 在 网 页 上 。 


15.10 ”创建 代表 新 注释 的 节点 


通过 函数 document.createComment()， 可 创建 代表 新 注释 (comment)〉 的 节点 实例 。 请 参看 如 
下 示例 。 
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【15-10-^-document-createComment.js】 


let c01 = document .createComment ('This is the body for the main content.') ; 
document .body.appendchild (c01) ; 


console.10g (document.body) ; 


【相关 说 明 】 


let c01 = document .createComment ('This is the body for the main content.') ; 

此 语句 声明 了 变量 c01, 其 初始 数据 为 【内 含 字符 串 'This is the body for the main content' 的 新 注 
释 (comment) 】 的 节点 实例 。 

document .body .appendChild(c01) ; 

此 语句 将 变量 c01 所 代表 的 新 注释 的 节点 实例 ， 新 增 至 body 元 素 实 例 中 。 

console.1log (document .body) ; 

此 语句 显示 出 如 下 的 信息 : 

<body> 

<input type="file" name="file_selector" id="file selector' accept=".js"> 

<script>...</script> 


<!--This is the body for the main content.--> 
</body> 


从 上 述 信息 可 看 出 ， 注 释文 本 【<!--This is the body for the main content.-->】， 存 在 于 如 上 的 
HTML 源 代码 片段 里 。 其 中 ，HTML 源 代码 里 的 注释 文本 ， 必 须 放 置 于 【<!--】 与 【-->】 之 问 。 


15.11 ”创建 代表 新 片段 或 新 元 素 的 节点 


通过 函数 document.createDocumentFragment()， 可 创建 【随后 可 再 被 新 增 其 他 子 节点 】 的 片段 
(fragment) 的 节点 实例 ;而 通过 函数 document.createElement()， 则 可 创建 新 的 元 素 实例 。 请 参看 
如 下 示例 。 


【15-11-^-document-createDocumentFragment-and-createElement.js】 


let e01 = document .createElement ('select') ; 

let e02 = null ; 

e01.style.fontsize = '1.2em' ; 

e01.style.marginTop = '10px' ; 

let fruits = ['apple', 'banana', 'cherry', 'durian', 'guava'] ; 


let f01 = document .createDocumentFragment () ; 
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for (let i = 0; i < fruits.length; I++) 


{ 
e02 = document .createElement ('option') ; 


e02.value = fruits[i] ; 


// e02.innerHTML = fruits[i] ; 
e02.textContent = fruits[i] ; 


£01.appendchild(e02) ; 
} 


e01.appendCchild(f01) ; 


document .body .appendChild(e01) ; 


【相关 说 明 】 

let e01 = document .createElement('select') ; 

此 语句 声明 了 变量 e01， 其 初始 数据 为 新 的 select 元 素 实例 。document.createElement('select') 
用 来 创建 并 返回 在 网 页 中 的 新 的 select 元 素 实例 。 

let e02 = null ; 

声明 初始 数据 为 空 值 Cnull) 的 变量 e02。 


e01.style.fontSize = "1.2em' 7 
e01.style.marginTop = '10px' ; 


这 两 个 语句 分 别 为 变量 e01 代表 的 select 元 素 实例 ， 设 置 了 字体 大 小 (font size) 和 项 部 边 距 
(margin on the top〉 的 外 观 。 


let fruits = ['apple', 'banana', 'cherry', ‘'durian', 'guava'] ; 
此 语句 声明 了 初始 数据 为 内 含 多 个 字符 串 的 数组 实例 的 变量 fruits。 
let £01 = document.createDocumentFragment () ; 
此 语句 声明 了 变量 f01， 其 初始 数据 为 【可 内 含 多 个 元 素 实例 的 源 代码 片段 / 文档 片段 
(document fragment) 】 的 节点 实例 。 
for (let i = 0; i < fruits.length; i++) 
因为 变量 fruits 的 数组 实例 的 元 素 个 数 为 5， 所 以 此 for 语句 会 迭代 5 次 。 
{ 
e02 = document .createElement ('option') ; 
此 语句 将 新 的 option 元 素 实例 ， 赋 给 变量 e02。 
e02.value = fruits[i] ; 
此 语句 将 【在 变量 fruits 的 数组 实例 中 ， 其 第 i+ 1 个 (其 索引 值 为 变量 i 的 数值 ) 元 素 】 的 数 
据 字 符 串 ， 赋 给 变量 e02 所 代表 的 option 元 素 实例 的 新 属性 value。 


// e02.innerHTML = fruits[i] ; 
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e02 .textContent = fruits[i] ; 

语句 将 【在 变量 fruits 数组 实例 中 ， 其 第 i+ 1 个 (索引 值 为 变量 i 的 数值 ) 元 素 】 的 数据 字 
符 串 ， 赋 给 变量 e02 所 代表 的 option 元 素 实例 的 新 属性 textContent。 

£01.appendchild (e02) ; 


语句 将 变量 e02 所 代表 的 option 元 素 实 例 ， 新 增 至 变量 f01 所 代表 的 节点 实例 中 。 


} 
e01.appendCchild(f01) ; 

语句 将 变量 f01 所 代表 的 内 含 多 个 option 元 素 实 例 的 节点 实例 ， 新 增 至 变量 e01 所 代表 的 
select 元 素 实 例 中 。 所 以 ， 变 量 e01 当前 代表 如 下 源 代码 片段 的 select 元 素 实 例 : 


<select style="font-size: 1.2em; margin-top: 10px;"> 
<option value="apple">apple</option> 
<option value="banana">banana</option> 
<option value="cherry">cherry</option> 
<option value="durian">durian</option> 
<option value="guava">guava</option> 


</select> 


document .body .appendchild(e01) ; 
此 语句 将 变量 e01 所 代表 的 select 元 素 实例 ， 新 增 至 body 元 素 实例 中 。 执 行 此 语句 之 后 ， 浏 
览 器 会 将 变量 e01 所 代表 的 select 元 素 实例 ， 正 式 显示 在 网 页 上 。 


15.12 ”创建 代表 新 文本 的 节点 


通过 函数 document.createTextNode()， 可 创建 代表 新 文本 的 节点 实例 。 请 参看 如 下 示例 。 


【15-12-^-document-createTextNode.js】 


let e01 = document .createElement('div') ; 
e01.id = "div01' ， 


let t01 = document .createTextNode ('A person who never made a mistake never tried anything 


new.') ; 
e01.appendchild(t01) ; 


e01.style.color = 'Gold' ; 
e01.style.backgroundColor = 'RoyalBlue' ; 


// e01.title = 'word count = 11' ; 
let a01 = document .createRttribute('title') ; 
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a0l.value = 'word count = 11' ; 
e01.setAttributeNode (a01) ; 


document .body .appendchild(e01) ; 


【相关 说 明 】 
let e01 = document .createElement ('div') ; 
此 语句 声明 了 变量 e01， 其 初始 数据 为 新 的 div 元 素 实例 。 
e01.id = 'div01' ; 
此 语句 将 字符 串 'div01'， 赋 给 变量 e01 所 代表 的 div 元 素 实例 的 属性 id， 使 得 div01 成 为 这 个 
div 元 素 实 例 的 身份 识别 码 。 


let t01 = document .createTextNode ('A person who never made a mistake never tried anything 
new.') ; 
e01.appendChild(t01) ; 


document.createTextNode('A person who never made a mistake never tried anything new.') 会 返 [E 
内 含 字符 串 'A person who never made a mistake never tried anything new.' 的 文本 节点 (text node) 实例。 

执行 这 两 个 语句 的 效果 , 等 同 于 执行 了 单一 语句 【e01.innerHTML ='A person who never made a 
mistake never tried anything new.' ;】， 可 将 字符 串 'A person who never made a mistake never tried 
anything new."， 赋 给 变量 e01 所 代表 的 div 元 素 实例 的 属性 innerHTML， 进 而 使 得 带 有 上 述 字符 串 
文本 的 div 元 素 实 例 ， 呈 现 于 当前 网 页 上 。 

e01.style.color = 'Gold' ; 

e01.style.backgroundColor = 'RoyalBlue' ; 


这 两 个 语句 分 别 使 得 变量 e01 所 代表 的 div 元 素 实例 ,以 金色 (gold) 的 字体 颜色 和 宝蓝 色 (royal 
blue) 的 背景 颜色 ， 哇 现 于 网 页 上 。 


// e01l.title = 'word count = 11' ; 
let a01 = document .createAttribute('title') ; 


语句 声明 了 变量 a01, 其 初始 数据 为 【在 特定 元 素 实例 中 , 其 名 称 为 title】 的 属性 (attribute) 
节点 实例 。 

a0l.value = 'word count = 11' : 

语句 将 字符 串 'word count = 11， 赋 给 【在 变量 a01 所 代表 的 名 称 为 title 的 属性 
其 名 称 为 value】 的 属性 。 

e01.setRAttributeNode(a01) ; 

此 语句 将 【变量 a01 所 代表 的 名 称 为 title 的 属性 节点 实例 】， 设 置 成 为 【变量 e01 所 代表 的 
div 元 素 实 例 】 的 属性 title。 执 行 完 此 语 名 之后， 浏览 器 会 在 当前 网 页 里 ， 动 态 生 成 上 述 div 元 素 
实例 的 如 下 源 代码 : 


<div id="div01" style="color: gold; background-color: royalblue;" title="word count = 11"> 


未 
DT 


点 实例 中 ， 


A person who never made a mistake never tried anything new.</div> 
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由 此 可 看 出 , 在 上 述 div 元 素 实 例 中 , 存在 属性 title 及 其 数据 字符 串 'word count = 11', 使 用 户 
将 鼠标 指针 ， 移 入 div 元 素 实例 的 范围 内 时 ， 便 会 出 现 提示 信息 【word count= 11】。 

document .body.appendchild(e01) ; 

此 语句 将 变量 e01 所 代表 的 div 元 素 实 例 ， 新 增 至 body 元 素 实例 中 。 执 行 此 语句 之 后 ， 浏 览 
器 会 将 变量 e01 所 代表 div 元 素 实例 ， 正 式 显 示 在 网 页 上 。 


15.13 ”返回 当前 网 页 的 根 元 素 


通过 属性 document.documentElement， 可 返回 当前 网 页 的 根 元 素 root) 实例 。 当 前 网 页 的 根 
元 素 实 例 ， 即 是 指 当前 网 页 中 的 html 元 素 实例 【<html>.…</html>】。 请 参看 如 下 示例 。 


【15-13-^-document-documentElement.js】 


let root = document.documentElement ; 
let children = root.children ; 


console.log(children) ; 
children[1] .style.backgroundColor = 'GreenYellow' ; 


console.log(children[1]) ; 


【相关 说 明 】 


let root = document.documentElement ; 


document.documentElement 会 返回 当前 网 页 (document) 的 根 元 素 (root) 实例 。 此 语句 声明 
了 变量 root， 其 初始 数据 为 当前 网 页 的 根 元 素 实例 。 
若 当前 网 页 的 大 致 架构 如 下 , 则 根 元 素 实例 即 是 html 元 素 实例 , 并 内 含 head 和 body 子 元 素 实例 。 
<html> 
<head>...</head> 
<body style="background-color: GreenYellow;">...</body> 


</html> 


let children = root.children ; 


root.children 会 返回 根 元 素 实例 中 的 子 元 素 实 例 所 构成 的 特殊 集合 [head, body]， 内 含 head 与 
body 元 素 实例 。 此 语句 声明 了 变量 children， 其 初始 数据 为 【 根 元 素 实例 中 的 所 有 子 元 素 实例 】 构 
成 的 特殊 集合 。 上 述 特殊 集合 的 数据 类 型 是 HTMLCollection 对 象 实例 ， 相 似 于 数组 实例 ， 可 内 含 
网 页 上 的 各 种 元 素 实 例 。 


console.log (children) ; 


显示 出 【HTMLCollection(2) [head, body]】 的 信息 。 


children[1] .style.backgroundColor = 'GreenYellow' }; 
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在 此 语句 中 ，children[1] 对 应 到 body 元 素 实例 ， 所 以 children[1] 当 前 等 价 于 document.body， 
使 得 此 语句 等 同 于 【document.body.style.backgroundColor = 'GreenYellow' ;】, 可 设置 网 页 的 背景 闫 
色 (background color) 为 绿 黄色 (green yellow) 。 


console.1log(children[1]) ; 


显示 出 【<body style="background-color: GreenYellow:">.…</body>】 的 信息 。 


15.14 ”访问 当前 网 址 的 域名 


或 者 动态 变更 当前 网 页 所 在 网 站 服务 器 (server) 的 域名 


通过 属性 document.domain， 可 返 
(domain name ) 。 请 参看 如 下 示例 。 


【15-14-^-document-domain.html】 


<!DOCTYPE html> 
<html> 
<head> 
<title>document domain</title> 
</head> 
<body> 
</body> 
<script> 
// Assume the domain is www.local.com 
console.log(document.domain) ; 


document .domain = "local.com' ; 
console.log(document.domain) ; 


</script> 
</html> 


【相关 说 明 】 


<script> 


// Assume the domain is www.local.com 
console.log(document.domain) ; 


相当 前 网 址 的 域名 (domain name)， 例 如 www.local.com 。 


document.domain 会 返 


document.domain = "local.com' ; 
若 当前 网 址 的 域名 为 www.local.com， 则 最 多 只 能 将 【上 一 层 】 域 名 local.com， 赋 给 
document.domain ; 否则 浏览 嚣 会 显示 出 类 似 【 Uncaught DOMException: Failed to set 


the'domain'property on'Document': 'global.com'is not a suffix ofwww.localcom'.】 的 错误 信息 。 
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15.15 ”返回 所 有 embed 元 素 构成 的 集合 


五 


通过 属性 document.embeds， 可 返 
下 示例 。 


【15-15-^-document-embeds.html}】 


<!DOCTYPE html> 
<html> 
<head> 
<title>document embeds</title> 
</head> 
<body> 
<embed src="animations/lst.gif" width="150" height="100"> 
<embed src="animations/2nd.gif" width="150" height="100"> 
<embed src="animations/3rd.gif" width="150" height="100"> 
<embed src="animations/4th.gif" width="150" height="100"> 
<embed src="animations/5th.gif" width="150" height="100"> 
</body> 
<script> 
let embeds = document .embeds ; 


当前 网 页 中 的 所 有 embed 元 素 实例 构成 的 集合 。 请 参看 如 


console.log(embeds) ; 
console.log(embeds.length) ; 
console.log(embeds[1] .src) ; 
</script> 

</html> 


【相关 说 明 】 
<script> 
let embeds = document .embeds ; 
此 语句 声明 了 变量 embeds， 其 初始 数据 为 当前 网 页 中 的 所 有 embed 元 素 实 例 构 成 的 集合 。 
console.log(embeds) ; 
显示 出 可 展开 的 【HTMLCollection(5)】 信 息 。 
console.log(embeds.length) ; 


embeds.length 会 返回 整数 值 5， 代 表 变 量 embeds 的 集合 中 的 embed 元 素 实例 个 数 。 


console.log(embeds [1] .src) ; 


embeds[1].src 会 返回 【在 变量 embeds 的 集合 里 ， 其 第 2 个 〈 索 引 值 为 1) embed 元 素 实例 中 
的 属性 sre】 的 数据 字符 串 ， 例 如 'file:///D:/examples/html/animations/2nd.gif 。 


互 
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15.16 ”返回 所 有 form 元 素 实例 构成 的 集合 


通过 属性 document.forms， 可 返回 当前 网 页 中 的 所 有 form 元 素 实例 构成 的 集合 。 请 参看 如 下 
示例 。 


【15-16-^-document-forms.html】 


【相关 说 明 】 


此 语句 声明 了 变量 forms， 其 初始 数据 为 【在 当前 网 页 中 , 被 documentforms 返回 的 所 有 form 


408 JavaScript 编程 思想 : 从 ES5 到 ES9 


元 素 实例 】 构 成 的 集合 。 
console.log(forms) ; 
显示 出 可 展开 的 【HTMLCollection(3)】 的 信息 。 


console.10og('') ; 


console.log(forms[0] .id) ; 

forms[0].id 会 返回 【在 变量 forms 的 集合 里 , 其 第 1 个 (索引 值 为 0) form 元 素 实例 的 属性 id】 
的 数据 字符 串 'form01'。 
console.log(forms[0] .elements[0] .id) ; 
forms[0].elements[0].id 会 返回 【在 变量 forms 的 集合 里 的 第 1 个 (索引 值 为 0〉form 元 素 实例 
中 ， 其 第 1 个 〈 索 引 值 为 0) 子 元 素 实例 的 属性 id】 的 数据 字符 串 username'。 
1 此 可 知 ,， 可 通过 forms[m].elements[n]， 快 速 访问 第 Cm + 1) 个 form 元 素 实例 中 的 第 Cn+ 1) 
个 子 元 素 实例 。 


console.10g('') ; 


// username.style.backgroundColor = 'Gold' ; 
forms [0] .elements[0].style.backgroundColor = 'Gold' ，; 


在 本 示例 中 ， 语 法 【 forms[0].elements[0].style.backgroundColor = 'Gold ;】 当 前 等 价 于 
【username.style.backgroundColor = 'Gold' ;】， 可 将 属性 id 的 数据 为 username' 的 input 元 素 实例 的 
背景 颜色 ， 设 置 为 金色 (gold)。 
console.log(forms[1].id) ; 
forms[1].id 会 返回 【在 变量 forms 的 集合 里 ， 其 第 2 个 (索引 值 为 1) form 元 素 实例 中 的 属 
id】 的 数据 字符 串 'form02'。 


性 


15.17 ”返回 特定 身份 识别 码 的 元 素 实例 


可 属性 id 的 数据 为 特定 名 称 ' 的 元 素 实例 。 请 参看 


通过 函数 document.getElementById0， 可 返 
如 下 示例 。 


【15-17-^-document-getElementByld.html]】 


<!DOCTYPE html> 
<html> 
<head> 
<title>document getElementById()</title> 
</head> 
<body> 
<hl id="header"> 
Hello, Earth! 
</h1> 
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【相关 说 明 】 
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aocument.body.style.textRlign = "center' ; 
此 语句 使 得 在 body 元 素 实例 中 的 文本 (text) 和 子 元 素 实例 , 均 呈 现 出 居中 对 齐 (align center) 
的 外 观 。 欲 在 网 页 上 呈现 出 来 的 子 元 素 实 例 ， 均 应 放置 在 document.body 元 素 实例 中 。JavaScript 
源 代码 中 的 document.body， 其 实 就 是 对 应 到 HTML 源 代码 的 【<body>...</body>】 元 素 实例 。 
let title = document.getElementById('header') ; 
语句 将 属性 id 的 数据 为 'header 的 hl 元 素 实例 , 赋 给 变量 title。 此 语句 等 价 于 简短 的 语句 【let 
title = header ;】 。 


title.style.color = 'YellowGreen' ; 
此 语句 将 字符 串 "YellowGreen'， 赋 给 变量 title 的 hl 元 素 实例 的 属性 style.color， 使 得 hl 元 素 
实例 内 的 字体 颜色 ， 成 为 黄 绿色 (yellow green) 。 

username.style.color = 'RoyalBlue' ; 

此 语句 将 字符 串 'RoyalBlue  ， 赋 给 属性 id 的 数据 为 "username' 的 input 元 素 实 例 的 属性 
style.color， 使 得 input 元 素 实例 内 的 字体 颜色 ， 成 为 宝蓝 色 (royal blue) 。 
username.style.fontSize = '20px' ; 

此 语句 将 字符 串 '20px'， 赋 给 属性 id 的 数据 为 usermame' 的 input 元 素 实例 的 子 属性 
style.fontSize， 使 得 input 元 素 实例 的 字体 尺寸 (font size) ， 成 为 20 像素 。 
username.style.backgroundColor = "Gold' ; 

此 语句 将 字符 串 'Gold' ， 赋 给 属性 id 的 数据 为 semame' 的 input 元 素 实例 的 子 属性 
style.backgroundColor， 使 得 input 元素 实例 的 背景 颜色 (background color) ， 成 为 金色 (gold) 。 


username.style.width = '120px' ; 
此 语句 将 字符 串 '120px', 赋 给 属性 id 的 数据 为 username' 的 input 元 素 实例 的 子 属性 style.width， 
使 得 input 元 素 实 例 的 宽度 (width) ， 成 为 120 像素 。 
username.placeholder = 'username...' ; 

语句 将 字符 串 "username.…， 赋 给 属性 id 的 数据 为 sername' 的 input 元 素 实例 的 属性 
placeholder， 使 得 input 元 素 实例 内 的 提示 用 途 的 占 位 (place holder) 文本 ， 成 为 【username.…】。 


username. style.padding = '2px' ; 
此 语句 将 字符 串 '2px', 赋 给 属性 id 的 数据 为 "username' 的 input 元 素 实 例 的 子 属性 style.padding， 
使 得 input 元 素 实例 的 内 侧 边 缘 ， 到 文本 的 内 边 距 / 填充 间 阳 (padding) ， 成 为 2 像素 。 
username. style.margin = '5px' ; 

此 语句 将 字符 串 '5px', 赋 给 属性 id 的 数据 为 sermame' 的 input 元 素 实例 的 子 属性 style.margin， 
使 得 input 元 素 实例 的 边框 , 到 其 他 元 素 实例 或 者 浏览 器 窗口 边缘 的 外 边 距 / 外 部 间隔 Cmargin) ， 
成 为 5 像素 。 
username.focus() ; 


此 语句 使 得 属性 id 的 数据 为 username' 的 input 元 素 实 例 ， 获 取 焦 点 〈focus) ， 进 而 让 键盘 光 
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标 呈 现在 input 元 素 实 例 的 内 部 ， 以 提示 用 户 输入 文本 。 
password.placeholder = 'password...' ; 


语句 将 字符 串 'password..'， 赋 给 属性 id 的 数据 为 'password' 的 input 元 素 实例 的 属性 
td 使 得 input 元 素 实例 内 的 提示 用 途 的 占 位 (place holder) 文本 ,成 为 【password...】。 


with (password.style) 


此 语法 可 简化 【属性 id 的 数据 为 password' 的 input 元 素 实例 】 的 访问 语句 。 例 如 : 简化 
【password.style.color】, 成 为 在 其 大 括号 里 的 【color】, 或 者 简化 【password.style.backgroundColor】， 
成 为 在 其 大 括号 里 的 【backgroundColor】。 


{ 
color = 'Teal' ; 
fontSize = '1.2em’' ; 
padding = '2px' ; 
margin = '5px' } 
backgroundColor = 'Yellow' ; 
width = '120px' ; 

} 


with (submit btn.style) 


此 语法 可 简化 【属性 id 的 数据 为 'submit_btn' 的 button 元 素 实例 】 的 访问 语句 。 例 如 : 简化 
【submit_btn.style.fontSize】, 成 为 在 其 大 括号 里 的 【fontSize】, 或 者 简化 【submit_btn.style.margin】， 
成 为 在 其 大 括号 里 的 【margin】。 


{ 
fontSize = '1.2em' ; 


margin = "0 5Px' ; 
此 语句 设置 button 元 素 实例 的 【上 下 】 外 边 距 为 0、【 左 右 】 外 边 距 为 5 像素 。 
} 


with (reset_btn.style) 

此 语法 可 简化 属性 id 的 数据 为 reset_btn' 的 button 元 素 实例 的 访问 语句 。 例 如 : 简化 
【reset_btn.style.fontSize】 成 为 在 其 大 括号 里 的 【fontSize】， 或 简化 【reset_btn.style.margin】， 成 
为 在 其 大 括号 里 的 【margin】。 


15.18 ”返回 被 设置 带 有 特定 CSS 类 名 的 
所 有 元 素 实例 的 集合 


通过 函数 document.getElementsByClassName(), 可 返回 被 设置 带 有 特定 CSS 类 名 (class name) 
的 所 有 元 素 实例 的 集合 。 请 参看 如 下 示例 。 
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【15-18-^-document-getElementsByClassName.html】 
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elist02[0] .style.textDecoration = 'underline' ; 
</script> 
</html> 


【相关 说 明 】 


<script> 


let elist01 = document .getElementsByClassName ('color01') ; 


此 语句 声明 了 变量 elist01， 其 初始 数据 为 【CSS 类 名 (class name) 被 设置 带 有 color01】 的 元 
素 实 例 的 集合 。 

在 【<div class="color01 border01">Hello</div>】 与 【<div class="color01 border02">World</div>】 
两 个 div 元 素 实例 中 ， 其 属性 class 的 数据 ， 均 带 有 子 字符 串 'color01'， 这 就 意味 着 带 有 color01 的 
CSS 类 名 。 

其 CSS 类 名 带 有 color01 的 元 素 实例 ， 会 被 应 用 选择 器 名 称 (selector name) 为 【.color01】 的 
如 下 CSS 样式 ， 从 而 使 得 其 文本 颜色 成 为 宝蓝 色 (royal blue) ， 其 背景 颜色 成 为 金色 〈gold) : 

.color01 

{ 


color: RoyalBlue ; 


background-color: Gold ; 


elist01[0] .style.opacity = 0.2 : 
elist01[1] .style.opacity = 0.2 ) 
elist01[0] 当 前 代表 着 div 元 素 实例 【<div class="color01 border01">Hello</div>】; elist02[1] 当 
前 代表 着 div 元 素 实例 【<div class="color01 border02">World</div>】。 
这 两 个 语句 分 别 在 上 述 两 个 div 元 素 实例 其 中 之 一 ， 设 置 其 子 属性 style.opacity 的 数值 为 0.2 
(20%)， 进 而 使 得 上 述 两 个 div 元 素 实例 ， 均 呈现 出 不 透明 度 (opacity) 为 20% 的 外 观 。 


let elist02 = document .getElementsByClassName ('color02 border02') ; 


此 语句 声明 了 变量 elist02， 其 初始 数据 为 【CSS 类 名 被 设置 同时 带 有 color02 与 border02】 的 
元 素 实 例 的 集合 。 

在 div 元 素 实例 【<div class="color02 border02">Solar System.</div>】 中 ， 其 属性 class 的 数据 ， 
同时 带 有 子 字 符 串 'color02' 与 'border02'， 这 就 意味 着 【其 CSS 类 名 同时 带 有 color02 与 border02】 
的 含义 。 

其 CSS 类 名 带 有 color02 的 元 素 实 例 ， 会 被 应 用 选择 器 名 称 为 【.color02】 的 如 下 CSS 样式 ， 
从 而 使 得 其 文本 颜色 成 为 森林 绿色 forest green) ， 背 景 颜色 成 为 粉红 色 (pink) : 

.Color02 


{ 


color: ForestGreen ; 


background-color: Pink ; 
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CSS 类 名 带 有 border02 的 元 素 实例 ， 则 会 被 应 用 选择 器 名 称 为 【.border02 】 的 如 下 CSS 样式 ， 
从 而 使 得 其 边框 成 为 宽度 ， 成 为 2 像素 (2px) 的 破 折 号 型 (dashed) 虚线 的 天 蓝 色 (sky blue) 边 
框 (border) : 

.border02 


{ 
border: 2px SkyBlue dashed ; 


elist02[0] .style.textDecoration = 'underline' ; 


elist02[0] 当 前 代表 div 元 素 实例 【<div class="color02 border02">Solar System.</div>】。 其 子 属 
性 style.textDecoration 代表 文本 装饰 〈text decoration) 为 下 画 线 (underline) ， 进 而 使 得 div 元 素 
实例 的 文本 装饰 (text decoration) 具有 下 画 线 (underline) 的 外 观 。 


15.19 返回 特定 标签 名 称 的 所 有 元 素 实例 的 集合 


通过 函数 document.getElementsByTagName()， 可 返回 具有 特定 标签 名 称 (tag name) 的 所 有 元 
素 实例 的 集合 。 请 参看 如 下 示例 。 
【15-19-^-document-getElementsByTagName.html】 


<!DOCTYPE html> 
<html> 
<head> 
<title>documentgetElementsByTagName ()</title> 
<style> 
div 
{ 
text-align: Center ; 
width: 100px ; 
height: 100px ; 
border-radius: 20px ; 
height: 50px ; 
display: table-cell ; 
vertical-align: middle ; 
} 


.color01 
{ 

color: RoyalBlue ; 
background-color: Gold ; 
} 


.Color02 

{ 

color: ForestGreen ; 
background-color: Pink ; 
} 
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【相关 说 明 】 


此 语句 声明 了 变量 elist， 其 初始 数据 为 【在 当前 网 页 上 ， 其 元 素 名 称 / 标签 名 称 (tag name) 
为 div】 的 所 有 元 素 实例 的 集合 。 


elist 趾 代表 【在 变量 elist 中 ， 其 第 i+ 1 个 (索引 值 为 变量 i 的 整数 ) 】 的 div 元 素 实例 的 子 属 
性 style.opacity， 使 得 各 div 元 素 实例 ， 呈 现在 网 页 上 时 ， 有 具有 不 同 的 不 透明 度 〈opacity) 的 外 观 ， 
例如 不 透明 度 为 20% (0.2) 、40% (0.4) 、60% (0.6) 或 80% (0.8) 。 


上 述 for 语句 会 迭代 4 次 ， 进 而 访问 不 同 的 div 元 素 实例 。 
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15.20 ”判断 当前 网 页 是 否 存在 焦点 


通过 函数 document.hasFocus()， 可 判断 焦点 〈focus) 是否 已 进入 当前 网 页 中 。 请 参看 如 下 示 
例 。 


【15-20-^-document-hasFocus.html】 


<!DOCTYPE html> 
<html> 
<head> 
<title>document hasFocus()</title> 
</head> 
<body> 
</body> 
<script> 
setInterval(check focus, 500) ; 


function check focus() 
{ 
let focused = document .hasFocus () ; 


if (focused) 
{ 
document .body.style.backgroundColor = 'GreenYellow' 
} 
else 
{ 
document .body.style.backgroundColor = 'Pink' 
} 
} 
</script> 
</html> 


【相关 说 明 】 


<script> 


setInterval (check focus, 500) ; 


此 语句 使 得 每 阳 500 毫秒 〈 半 秒 ) ， 即 调用 名 称 为 check_focus 的 函数 。 
function check focus() 


{ 


let focused = document.hasFocus() ; 
车 当前 网 页 获得 焦点 (focus) ，document.hasFocus() 会 返回 布尔 值 true; 若 当 前 网 页 失去 焦点 ， 
则 document.hasFocus0 会 返回 false。 单 击 当 前 网 页 内 的 任何 位 置 ， 都 可 使 得 当前 网 页 获得 焦点 。 所 
以 ， 此 语句 声明 了 变量 focused， 其 初始 数据 为 布尔 值 false 或 true。 


if (focused) 
{ 
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若 当前 网 页 获得 焦点 ， 则 执行 此 语句 , 进而 使 得 网 页 的 背景 颜色 , 成 为 绿 黄色 (green yellow) 。 


车 当前 网 页 失去 焦点 ， 则 执行 此 语句 ， 进 而 使 得 网 页 的 背景 颜色 ， 成 为 粉红 色 (pink) 。 


上 述 语法 定义 了 函数 check_focus()。 


15.21 返回 当前 网 页 的 head 元 素 实例 


通过 属性 document.head， 可 返回 当前 网 页 的 head 元 素 实 例 。 请 参看 如 下 示例 。 
【15-21-^-document-head.html】 


【相关 说 明 】 
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console.log(document.head) ; 
此 语句 显示 出 可 展开 的 【<head>.….</head>】 的 信息 。 加 以 展开 之 后 ， 可 进一步 看 到 head 元 素 
实例 内 的 子 元 素 实例 : 
<title>USING DOCUMENT HEAD OBJECT</title> 
<style>...</style> 


let my title = document.head.getElementsByTagName ('title') [0] ; 


此 语句 声明 了 变量 my_title， 其 初始 数据 为 title 元 素 实例 【<title>document head</title>】。 
document.head.getElementsBByTagName('title") 会 返回 其 元 素 名 称 / 标签 名 称 (tag name ) 为 title 的 所 
有 元 素 实例 的 集合 。 在 此 ， 元 素 名 称 为 title 的 元 素 实例 仅 有 1 个 ， 所 以 在 其 集合 内 ， 只 有 1 个 title 
元 素 实例 ,也 就 是 索引 值 为 0 的 title 元 素 实例 ,因此 ,document.head.getElementsByTagName ('title)[0] 
会 返回 其 元 素 名 称 为 title 的 元 素 实 例 。 


my_title.innerHTML = my title.innerHTML.toUpperCase() ; 


语句 可 使 得 变量 my_title 的 title 元 素 实例 内 的 文本 【document head】， 变 成 所 有 字母 均 大 
写 的 【DOCUMENT HEAD】。 在 此 语句 的 等 号 右 侧 ，my_title.innerHTML 可 返回 title 元 素 实例 内 
的 文本 字符 串 'document head' 。 因 为 是 字符 串 ， 所 以 支持 函数 toUpperCase()， 使 得 
my_title.innerHTML.toUpperCase() 返 回 字符 串 'DOCUMENT HEAD'。 


已 


15.22 ”返回 当前 网 页 所 有 image 元 素 实例 的 集合 


通过 属性 document.images， 可 返回 当前 网 页 的 所 有 image 元 素 实例 的 集合 。 请 参看 如 下 示例 。 


【15-22-^-document-images.html】 


<!DOCTYPE html> 
<html> 
<head> 
<title>document images</title> 
<style> 
img 
{ 
width: 100px ; 
height: 70px ; 
} 
</style> 
</head> 
<body> 
</body> 
<script> 
let count = 1, suffix = '' } 


for (let i = 1; i < 21; i++) 
{ 
suffix = i.tostring() .padstart (2,'0') ; 
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document .writeln(`<img id="image$ {suffix}" src="images/w${suffix}.jpg">*) ; 
} 


let image list = document.images ; 
let color = '" } 


for (let j = 0; j < image list.length; j++) 


{ 
color = '#'+ parseInt (Oxffffff * Math.random()) .toString(16) .padStart (6,'0') ; 


image list[j].style.border = “5px ${color}double. ; 
} 
</script> 
</html> 


【相关 说 明 】 
<script> 
et vounb ms Ty SUrtix mm Mg 
此 语句 声明 了 初始 值 为 1 的 变量 count， 以 及 初始 数据 为 空 字符 串 " 的 变量 suffix。 
FO (TOC Sm Lr br LR Tt 
{ 
suffix = i.toString().padStart(2,'0') ; 
此 语句 将 变量 i 被 欠 代 的 整数 值 1 ~ 20， 分 别 转换 成 为 字符 串 '01'、'02'、'03'、...、'20'， 并 赋 给 
变量 suffix。 其 中 ，i.toString0) 会 返回 【转换 变量 i 的 整数 值 】 之 后 的 字符 串 1'、2'、'3'、...、'20'， 
再 经 过 padStart(2,'0") 的 【 左 侧 补 0】 的 处 理 之 后 ， 最 终 返 回 '01'、'02'、'03'、...、'20'。 


document .writeln (‘<img id="image${suffix}" src="images/w${suffix}.jpg">*) ; 


此 语句 可 在 网 页 里 ， 动 态 写 入 write) 一 个 新 的 img 元 素 实 例 的 源 代码 片段 (例如 <img 
id="image05" src="images/w05.jpg">) 之 后 ， 再 写 入 换行 (In, line) 字符 ， 使 得 各 img 元 素 实例 所 
代表 的 影像 ， 呈 现在 网 页 上 时 ， 分 别 被 换行 而 纵向 排列 。 

} 
上 述 for 语句 会 迭代 20 次 。 
let image list = document .images ; 

此 语句 声明 了 变量 image_list， 其 初始 数据 为 当前 网 页 中 的 所 有 img 元 素 实例 的 集合 。 

let Color = ''，} 

声明 初始 数据 为 空 字 符 串 "的 变量 color。 


for (let j = 0; j < image list.length; j++) 
{ 


Color = '#' + parseInt (Oxffffff * Math.random()).toSstring(16) .padStart (6,'0') ; 


此 语句 将 字符 当 ， 衔 接 至 【被 随机 产生 而 介 于 0 ~ 165- 1 (COxffffff) 】 之 间 的 十 六 进 制 数码 ， 
例如 #a9e2f8 或 #04028a 等 。 


420 


JavaScript 编程 思想 : 从 ES5 到 ES9 


因为 parseInt(Oxffffff* Math.random()).toString(16) 有 可 能 会 返回 未 满 6 位 而 类 似 【4028a]】 的 十 

六 进 制 数码 , 所 以 必须 通过 padStart(6,0"), 以 进行 【 左 侧 补 0】 的 处 理 , 进而 转换 成 为 类 似 【04028a】 

的 十 六 进 制 数码 。 最 后 ， 变 量 color 的 数据 字符 串 ， 才 能 成 为 表达 特定 颜色 的 颜色 数码 ， 例 如 
【#04028a】。 


image_list[j] .style.border = “5px ${color}double、 ; 
此 语句 使 得 在 变量 image_list 的 集合 中 的 第 j+ 1 个 img 元 素 实 例 ,被 设置 了 宽度 为 5 像素 (5px) 
的 特定 颜色 的 双 线 (double〉 边 框 ， 使 得 img 元 素 实例 的 源 代码 片段 ， 变 成 【<img id="image05" 
src="images/w05.jpg" style="border: 5px double #04028a;">】。 若 通过 浏览 器 ， 加 以 检查 其 源 代码 片 
段 ， 则 会 看 到 被 自动 转换 成 为 颜色 语法 不 同 的 源 代码 片段 ， 例 如 【 <img id="image05" 
SIc="images/w05.jpg" style="border: Spx double rgb(4, 2, 138);">}】 。 


} 
上 述 for 语句 会 迭代 20 次 。 


15.23 ”创建 当前 网 页 或 者 子 网 页 里 的 
特定 节点 实例 的 副本 


通过 函数 document.importNode() 或 【特定 元 素 实例 的 id】 衔 接 函 数 【.cloneNode0】 的 调用 ， 
可 在 当前 网 页 或 者 iframe 元 素 实例 中 的 子 网 页 里 ， 创 建 特定 节点 实例 的 副本 。 请 参看 如 下 两 个 示 
例 。 
【15-23-^-e1-document-importNode.html】 


<!DOCTYPE html> 
<htm1> 
<head> 
<title>document importNode()</title> 
<style> 
[id^=div] 
{ 
width: 120px ; 
padding: 5px ; 
margin: 5px ; 
border-radius: 5px ; 
border: lpx Cyan solid; 
} 


img 
{ 
width: 100px ; 
height: 60px ; 
} 
</style> 
</head> 
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<body> 
<div id="div01" align="center"> 
<img src="images/w01.jpg"> 
<br> 
<span>Natural waterfall</span> 
</div> 
</body> 
<script> 
let ref = null 5 


ref = document.importNode (div01, true) ; 


ref.id = 'div02' ; 
ref.getElementsByTagName ('img') [0] .src = 'images/w18.jpg' ; 
ref.getElementsByTagName ('span') [0] .innerHTML = 'Flowers and the bees' ; 
document .body.appendchild (ref) ; 
</script> 
</html> 
【相关 说 明 】 
<script> 
let ref = null ; 
声明 初始 数据 为 空 值 (null) 的 变量 ref。 


ref = document.importNode (div01，true) ; 


此 语句 将 document.importNode(div01，true) 返 回 的 元 素 实例 ， 赋 给 了 变量 ref。 其 中 ， 
document.importNode(div01, true) 可 返回 【属性 id 的 数据 为 'div01' 的 div 元 素 实 例 】 的 副本 。 函 数 
importNode() 的 第 2 个 参数 的 数据 为 布尔 值 true， 意味 着 对 属性 id 的 数据 为 'div01' 的 div 元 素 实例 ， 
进行 复制 时 ， 必 须 一 并 复制 其 内 部 的 所 有 子 元 素 实例 。 


ref.id = "div02' ; 


已 


语句 设置 了 【在 变量 ref 的 div 元 素 实例 中 ， 其 属性 id 的 数据 】 成 为 'div01'。 
ref.getElementsByTagName ('img') [0] .src = 'images/w18.jpg' ; 


此 语句 将 特定 影像 文档 路 径 的 字符 串 'images/w18.jpg'， 赋 给 了 【在 变量 ref 的 新 元 素 实例 中 ， 
其 第 1 个 img 子 元 素 实例 】 的 属性 src。 


ref.getElementsByTagName ('span') [0] .innerHTML = 'Flowers and the bees' 


此 语句 将 字符 串 Flowers and the bee'， 赋 给 了 【在 变量 ref 的 新 元 素 实 例 中 ， 其 第 1 个 span 子 
元 素 实例 】 的 属性 innerHTML。 


document .body .appendChild (ref) ; 


此 语句 将 变量 ref 的 新 元 素 实例 ， 新 增 至 body 元 素 实例 中 。 在 本 示例 的 网 页 上 ， 除 了 呈现 出 
影像 文档 和 说 明文 本 的 原始 区 块 之 外 , 还 动态 呈现 出 其 源 代码 架构 大 致 相同 , 但 内 含 不 同 的 影像 文 
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档 和 说 明文 本 的 新 区 块 。 
【15-23-^-e2-DOM-cloneNode.html] 


【相关 说 明 】 
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此 语句 声明 了 变量 element， 其 初始 数据 为 【属性 id 的 数据 为 'div01' 的 div 元 素 实例 】 的 副本 。 
div01.cloneNode() 会 返回 【属性 id 的 数据 为 'div01' 的 div 元 素 实 例 】 的 副本 ， 但 不 包含 其 内 部 的 各 
个 子 元 素 实 例 ; 而 div01.cloneNode(true) 则 会 返回 包含 其 所 有 子 元 素 实例 在 内 的 副本 。 

element .id = 'div02' ; 

此 语句 将 字符 串 'div02'， 赋 给 变量 element 所 代表 的 div 元 素 实例 副本 的 属性 id。 

element .innerHTML = '<p href="#">Nice</p>' ; 

此 语句 将 字符 串 '<p href="#">Nice</p>'， 赋 给 变量 element 所 代表 的 div 元 素 实例 副本 的 属性 
innerHTML 6。 换言之 ,此 语句 间接 在 div 元 素 实 例 副 本 中 ,新 增 了 p 元 素 实例 [<p hre 伍 "#">Nice</p>】。 


element .innerHTML += '<a href="#">amazing hour</a>' ; 


此 语句 将 字符 串 '<a hre 仁 "#">amazing hour</a>'， 通 过 运算 符 【+=】， 串 接 至 【在 变量 element 
所 代表 的 div 元 素 实例 副本 中 ， 其 属性 innerHTML】 的 数据 字符 串 里 。 换 言 之 ， 此 语句 间接 在 div 
元 素 实例 副本 中 ， 新 增 了 a 元 素 实例 【<a hre 伍 "#">amazing hour</a>】。 
document .body .appendChild (element) ; 
此 语句 将 变量 element 所 代表 的 div 元 素 实例 副本 ， 新 增 至 body 元 素 实例 中 。 因 此 ， 在 网 页 
会 看 到 两 个 布局 相同 ， 但 文本 不 同 的 div 元 素 实 例 。 


15.24 ”获取 当前 网 页 的 最 近 被 修改 的 日 斯 和 时 间 


通过 属性 document.lastModified， 可 返回 当前 网 页 的 最 近 被 修改 的 日 期 与 时 间 。 请 参看 如 下 示 


例 。 
【15-24-^-document-lastModified.html】 


<!DOCTYPE html> 
<html> 
<head> 
<title>document lastModified</title> 
</head> 
<body> 
</body> 
<script> 
console.log(document.lastModified) ; 
console.1og('') ; 


let mdate = new Date(document.lastModified) ; 


console.log(mdate) ; 
console.10g('') ; 


console.log(mdate.getFullYear ()) ; 
console.log(mdate.getMonth()) ; 
console.log(mdate.getDate()) ; 
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Console.1og('') ; 


console.log(mdate.getDay ()) ; 
console.10og('') ; 


console.log(mdate.getHours()) ; 
console.log(mdate.getMinutes()) ; 
console.log(mdate.getSeconds()) ; 
</script> 
</html> 


【相关 说 明 】 


<script> 


console.log(document.lastModified) ; 


dcoument.lastModified 返回 当前 网 页 的 最 近 被 修改 的 【日 期 与 时 间 】 字 符 串 ， 例 如 12/03/2018 
20:17:40。 


console.10g('') ; 


let mdate = new Date(document.lastModified) ; 
此 语句 声明 了 变量 mdate， 其 初始 数据 为 【内 含 当前 网 页 的 最 近 被 修改 的 日 期 与 时 间 】 的 Date 
对 象 实例 ， 例 如 日 期 与 时 间 为 【Mon Dec 03 2018 20:17:40 GMT+0800】 的 Date 对 象 实例 。 


console.log(mdate) ; 
console.10g('') ; 


console.log(mdate.getFullYear()) ; 
mdate.getFullYear() 返 回 【 在 当前 网 页 的 最 近 被 修改 的 日 期 中 ， 其 代表 公元 年 份 】 的 数值 。 
console.log(mdate.getMonth()) ; 


madate.getMonthO 返 回 【在 当前 网 页 的 最 近 被 修改 的 日 期 中 ， 其 代表 月 份 】 的 数值 。 其 中 ， 数 
值 0 代表 1 月 份 ， 数 值 11 代表 12 月 份 。 


console.log(mdate.getDate()) ; 
【在 当前 网 页 的 最 近 被 修改 的 日 期 中 ， 其 代表 日 】 的 数值 。 


console.10g('') ; 


mdate.getDate(0 返 回 


console.log(mdate.getDay()) ; 


mdate.getDay() 返 回 【 在 当前 网 页 的 最 近 被 修改 的 日 期 中 ， 其 代表 星期 几 】 的 数值 。 其 中 ， 数 
值 0 代表 星期 日 ， 数 值 6 代表 星期 六 。 


console.10g('') ; 


console.log(mdate.getHours()) ; 


mdate.getHours() 返 回 【 在 当前 网 页 的 最 近 被 修改 的 时 间 中 ， 其 代表 时 数 】 的 数值 。 


console.log(mdate.getMinutes()) ; 
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mdate.getMinutes0 返 回 【 在 当前 网 页 的 最 近 被 修改 的 时 间 中 ， 其 代表 分 钟 数 】 的 整数 值 。 
console.1og(mdate.getSecondqs()) ; 


mdate.getSeconds(0 返 回 【 在 当前 网 页 的 最 近 被 修改 的 时 间 中 ， 其 代表 秒 数 】 的 整数 值 。 


15.25 ”返回 当前 网 页 中 的 所 有 超 链 接 元 素 实例 的 集合 


DH 


通过 属性 document.links, 可 返回 当前 网 页 中 的 所 有 超 链接 (hyper link) 元 素 实例 构成 的 集合 。 
其 中 ， 带 有 属性 href 及 其 数据 的 a 元 素 实 例 与 area 元 素 实 例 ， 均 被 视 为 超 链 接 元 素 实例 。 请 参看 
如 下 示例 。 

【15-25-^-document-links.html】 


<!DOCTYPE html> 
<html> 
<head> 
<title>document links</title> 
</head> 
<body> 
<a href="#" id="a0l">Test 1</a> 
<a href="#" id="a02">Test 2</a> 
<hr color="ForestGreen"> 
<a href="#" id="a03">Test 3</a> 
<a href="#" id="a04">Test 4</a> 
<hr color="RoyalBlue"> 
<a href="#" id="a05">Test 5</a> 
<a href="#" id="a06">Test 6</a> 
<a href="#" id="a07">Test 7</a> 
</body> 
<script> 


let refs = document.links ; 
console.log(refs) ; 


for (let i = 0; i < refs.length; i++) 
{ 
refs[i].style.color = '#'+ parseInt (Oxffffff * Math.random()) .toString(16) . 
padstart (6,'0') ; 
} 
</script> 
</html> 


【相关 说 明 】 


<script> 


let refs = document.links ; 


此 语句 声明 了 变量 refs， 其 初始 数据 为 当前 网 页 中 的 所 有 超 链接 a 元 素 实例 构成 的 集合 。 


console.log(refs) ; 
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显示 出 可 展开 的 【HTMLCollection(7)】 的 信息 。 
for (let i = 0; i < refs.length; i++) 


{ 


refs[i].style.color = '#' + parseInt (Oxffffff * Math.random()) .toString(16). 
padstart(6,'0') ; 


在 上 述 for 循环 语句 的 每 次 迭代 中 ，refs 自 代表 其 中 一 个 超 链接 a 元 素 实例 ， 使 得 其 属性 
style.color， 随 机 被 设置 成 为 特定 颜色 数码 ， 例 如 #a9e2f8'。 此 语句 将 字符 # 衔 接 到 【被 随机 产生 而 
介 于 0~ 165- 1(COxffffff) ] 之 间 的 十 六 进 制 数 码 , 例如 #a9e2f8 或 #04028a 等 。 因为 parseInt(Oxffffff 
* Math.random()).toString(16) 有 可 能 返回 未 满 6 位 而 类 似 【4028a】 的 十 六 进 制 数码 ， 所 以 必须 通过 
padStart(6.0)， 进 行 【 左 侧 补 0】 的 处 理 ， 进 而 转换 成 为 类 似 【04028a】 的 十 六 进 制 数码 。 最 后 ， 
变量 color 的 数据 字符 串 ， 才 能 成 为 表达 特定 颜色 的 颜色 数码 ， 例 如 【#04028a】。 

读者 在 浏览 器 的 调试 工具 【Console】 面 板 里 ， 输 入 【refs[0].style.color】 时 ,会 看 到 已 经 被 浏 
览 器 转换 之 后 的 类 似 rgb(4, 2, 138) 的 字符 串 ， 而 不 是 类 似 #04028a' 的 字符 串 。 

} 


上 述 for 循环 语句 会 迭代 7 次 ， 这 是 因为 refs.length 当前 返回 整数 值 7， 意 味 着 变量 refs 的 集 
合 内 ， 内 含 7 个 元 素 实例 。 


15.26 ”返回 特定 CSS 选择 器 名 称 对 应 的 
元 素 实 例 或 集合 


通过 函数 document.querySelector()， 可 返回 特定 CSS 选择 器 名 称 (selector name) 对 应 的 第 1 
个 元 素 实例 ; 通过 document.querySelectorAll()， 可 返回 特定 CSS 选择 器 名 称 对 应 的 所 有 元 素 实例 
构成 的 集合 。 请 参看 如 下 示例 。 


【15-26-^-document-querySelector-and-querySelectorAll.html]】 


<!DOCTYPE html> 
<html> 
<head> 
<title>documentquerySelector() and querySelectorAll()</title> 
<style> 
[id^=div] 
{ 
width: 120px ; 
padding: 5px ; 
margin: 5Px ;? 


border-radius: 5px ;? 
border: lpx Cyan solid ; 
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【相关 说 明 】 
一 
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let ref01 = document.queryselector('div') ; 
此 语句 声明 了 变量 ref01， 其 初始 数据 为 document.querySelector('div'") 所 返回 的 div 元 素 实例 。 
let ref02 = document.queryselector('#div01') ; 
此 语句 声明 了 变量 ref02， 其 初始 数据 为 document.querySelector(#div01") 所 返回 的 div 元 素 实 
例 。 被 传 入 函数 document.querySelector('#div01') 的 参数 数据 ， 是 CSS 选择 器 名 称 (selector name) 
的 字符 串 #div01'。 举 例 来 说 ，'div' 代 表 选 择 【 在 当前 网 页 中 ， 其 元 素 名 称 / 标签 名 称 为 div】 的 元 
素 实例 ， 而 #div01' 则 代表 选择 【在 当前 网 页 中 ， 其 属性 id 的 数据 为 'div01'】 的 元 素 实 例 。 
console.log(ref01 == ref02) ; 
在 此 ，【ref01 一 ref02】 返 回 布尔 值 tue， 意 味 着 变量 ref01 与 ref02， 均 对 应 到 带 有 相同 内 存 
引 址 的 div 元 素 实例 。 
ref01.style.border = '5px Gold dotted’' ; 
ref02.style.outline = '5px Pink dashed' ; 


因为 变量 ref01 与 ref02 当前 均 对 应 到 同一 个 div 元 素 实例 ， 所 以 这 两 个 语句 ， 均 在 同一 个 div 
元 素 实 例 上 ， 分 别 设置 了 边框 (border) 和 外 框 〈outline) 。 

let ref03 = document.querySelectorAll('div img') ; 

此 语句 声明 了 变量 ref03, 其 初始 数据 为 document.querySelectorAll('div img") 所 返回 的 多 个 元 素 
实例 构成 的 集合 。 在 此 , 被 传 入 函数 document.querySelectorAll(div img') 的 参数 数据 字符 串 'div img'， 
是 CSS 选择 器 名 称 (selector name) 的 字符 串 ， 意 味 着 选择 【在 当前 网 页 中 ， 其 外 层 的 其 中 之 一 ， 
是 div 元 素 实 例 】 的 所 有 img 元 素 实例 。 


console.10g('') ; 


console.log(ref03) ; 
显示 出 可 展开 的 【NodeList(3)】 的 信息 。 
ref03[1].style.opacity = 0.3 ; 
ref03[1] 当 前 对 应 到 网 页 中 的 第 2 个 (索引 值 为 1) img 元 素 实例 。 此 语句 设置 了 上 述 img 元 素 
实例 的 子 属性 style.opacity 的 数值 为 0.3， 意 味 着 上 述 img 元 素 实例 ， 以 不 透明 度 30% (0.3) 的 外 
观 ， 呈 现在 网 页 上 。 


let ref04 = document.querySelectorAll('div>span') ; 
此 语句 声明 了 变量 ref04， 其 初始 数据 为 document.querySelectorAll('div>span') 所 返回 的 多 个 元 
素 实例 构成 的 集合 。 被 传 入 函数 document.querySelectorAll('div>span') 的 参数 数据 字符 串 'div>span'， 
是 CSS 选择 器 名 称 (selector name) 的 字符 串 ， 意 味 着 选择 【在 当前 网 页 中 ， 其 上 一 层 刚好 是 div 
元 素 实例 】 的 所 有 span 元 素 实例 。 


console.10g('') 


console.log(ref04) ; 
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显示 出 可 展开 的 【NodeList(3)】 的 信息 。 
ref04[0] .style.color = 'SkyBlue' ; 
ref04[0] 当 前 对 应 到 网 页 中 第 1 个 (索引 值 为 0) span 元 素 实例 。 此 语句 设置 了 上 述 span 元 素 
实例 的 属性 style.color 的 数据 为 字符 串 'SkyBlue'， 意 味 着 上 述 span 元 素 实 例 ， 以 天 蓝 色 (sky blue) 
文本 颜色 的 外 观 ， 呈 现在 网 页 上 。 


15.27 ”返回 和 处 置 当前 网 页 的 加 载 状态 


通过 属性 document.readyState， 可 返回 当前 网 页 的 加 载 (loading) / 就 绕 (ready) 状态 ; 通过 
属性 document.onreadystatechange， 可 设置 一 旦 当前 网 页 的 就 绪 状 态 (ready state) 发 生 任何 变化 
(change〉 时， 就 调用 【作为 事件 处 理 器 (event handler) 】 的 函数 。 请 参看 如 下 示例 。 


【15-27-^-document-readyState-and-onreadystatechange.html】 


<!DOCTYPE html> 
<html> 
<head> 
<title>document readyState and onreadystatechange</title> 
</head> 
<body> 
</body> 
<script> 
console.log(document .readyState) ; 


document .onreadystatechange = function (event) 
Switch (document .readyState) 
{ 
case 'loading': 
console.log('The document is being loaded.\n\n') ; 
break ; 
case 'interactive': 
console.log('The DOM is ready to be accessed.\n\n') ; 
break ; 
case 'complete': 
console.log('The document has been completely loaded.\n\n') ; 
break ; 
} 
可 
</script> 
</html> 


【相关 说 明 】 
<script> 


console.log(document.readyState) ; 


document.readyState 在 此 返回 代表 网 页 当前 加 载 状态 的 字符 串 1oading'。 
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document .onreadystatechange = function (event) 
{ 


switch (document.readystate) 
此 语法 通过 document.readyState 所 返回 的 网 页 当前 加 载 状 态 的 字符 串 ， 加 以 选择 特定 的 执行 
分 支 。 


{ 


case 'loading': 
console.log('The document is being loaded.\n\n') ; 
break ; 
case 'interactive': 
console.log('The DOM is ready to be accessed.\n\n') ; 
break ; 
Case 'complete': 
console.log('The document has been completely loaded.\n\n') ; 
break ; 


从 上 述 各 case 语句 来 看 ， 可 将 其 加 载 状态 ， 大 致 分 为 网 页 加 载 中 〈loading) 、 子 资源 (影像 、 
框架 源 代 码 、 样 式 表 源 代码 等 ) 加 载 中 〈interactive) ， 以 及 加 载 完成 complete ) 。 
} 


J 
在 上 述 语法 中 ， 将 其 等 号 右 侧 的 匿名 函数 的 定义 ， 赋 给 了 代表 网 页 本 身 的 document 对 象 实例 
的 属性 onreadystatechange。 一 旦 网 页 当前 的 加 载 状态 ， 发 生变 化 时 ， 上 述 匿 名 函数 就 会 被 调用 。 
上 述 语法 前 后 会 使 得 3 个 信息 ， 按 照 如 下 顺序 ， 呈 现在 浏览 器 的 调试 工具 【Console】 面 板 里 ， 


® The document is being loaded. 
® The DOM is ready to be accessed. 
® The document has been completely loaded. 


15.28 ”返回 跳 转 前 的 网 址 


通过 属性 document.referrer， 可 返回 【 跳 转 至 当前 网 页 的 前 一 网 页 】 的 网 址 。 请 参看 如 下 带 有 
两 个 源 代码 文档 的 示例 。 请 留意 ， 本 示例 的 源 代码 文档 ， 必 须 通 过 HTTP 协议 , 才能 调试 出 其 正确 
的 结果 。 


【15-28-^-document-referrer.html]】 


<!DOCTYPE html> 
<html> 
<head> 
<title>document referrer</title> 
</head> 
<body> 
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</body> 
<script> 

console.log(document. referrer) ; 
</script> 
</html> 


【相关 说 明 】 


<script> 


console.log(document.referrer) ; 


若 浏览 器 加 载 这 个 网 页 文档 ， 是 因为 在 类 似 【http:/ 主 机 名 /文件 夹 名 称 /15-28-^-prior-to- 


document-referrer.html] 所 代表 的 网 页 中 , 用 户 单 击 了 特定 超 链接 , 则 在 浏览 器 的 调试 工具 【Console】 


面板 
示 出 
的 网 


【1 


里 ， 类 似 【http:// 主 机 名 /文件 夹 名 称 /15-28-^-prior-to-document-referrer.html】 的 信息 ， 会 被 显 
来 。 这 也 就 意味 着 【http:// 主 机 名 /文件 夹 名 称 /15-28-^-prior-to-document-referrer.html】 所 代表 
页 ， 即 是 本 网 页 的 引用 来 源 (referrer) 。 若 让 浏览 器 直接 加 载 本 网 页 ， 则 document.referrer 只 
中 【http:// 主 机 名 /文件 夹 名 称 /】 的 不 完整 信息 。 


【15-28-^-prior-to-document-referrer.html】 


<!DOCTYPE html> 
<html> 
<head> 
<title>prior to document referrer</title> 
</head> 
<body> 
<a href="15-28-^-document-referrer.html">To Main Page</a> 
<p></p> 
<iframe src="15-28-^-document-referrer.html"></iframe> 
</body> 
</html> 


【相关 说 明 】 
<iframe src="15-28-^-document-referrer.html"></iframe> 
在 本 网 页 的 iframe 元 素 实 例 中 ， 加 载 了 其 属性 sre 的 数据 字符 串 所 代表 的 网 页 
5-28-^-document-referrer.html 】 。 而 在 网 页 【15-28-^-document-referrer.html1】 中 ， 语 句 


【console.log(document.referrer) ;】 会 被 执行 。 所 以 ， 在 浏览 器 的 调试 工具 【Console】 面 板 中 ， 亦 
会 显示 出 类 似 【http:// 主 机 名 /文件 夹 名 称 /15-28-^-prior-to-document-referrer.html】 的 信息 。 这 就 意 
味 着 在 浏览 器 的 窗口 里 ， 之 所 以 间接 呈现 出 网 页 【15-28-^-document-referrer.html】 的 画面 ， 是 因为 
本 网 页 的 缘故 ! 


因此 ， 若 用 户 单 击 了 超 链接 【<a hre 伟 "15-28-^-document-referrer.html">To Main Page</a> 】， 


则 浏览 器 会 加 载 网 页 【 15-28-^-document-referrerhtml 】， 并 间接 执行 【console.log(document. 
referrer) ;】， 从 而 显示 出 类 似 【http:/ 主 机 名 /文件 夹 名 称 /15-28-^-priorto-document-referrer.html】 的 
信息 。 


432 | Javascript 编程 思想 : 从 ES5 到 ES9 


15.29 ”解除 已 被 附加 的 事件 处 理 堪 


通过 函数 document.removeEventListener()， 可 解除 已 被 附加 至 特定 元 素 实例 的 事件 处 理 器 
(event handler) 。 请 参看 如 下 示例 。 


【15-29-^-document-removeEventListener.html]】 
<!DOCTYPE html> 
<html> 
<head> 
<title>document removeEventListener()</title> 
</head> 
<body> 
</body> 
<script> 
let xy list = [], count = 0 ; 


document .addEventListener('click', save xy) ; 


function save xy (event) 
{ 
xy list.push(‘ (${event.clientX}, ${event.clientY})*) ; 


Count++ } 


if (count == 4) 
{ 


document.removeEventListener('click', save xy) ; 


console.log(xy list) ; 
} 
} 
</script> 
</html> 


【相关 说 明 】 


<script> 
let xy list = [], count = 0 ; 
此 语句 声明 了 初始 数据 为 空 数组 实例 [] 的 变量 xy_list， 以 及 初始 值 为 0 的 变量 count。 
document .addEventListener('click', save xy) ; 


此 语句 通过 调用 函数 addEventListener()， 使 得 document 对 象 实例 所 代表 的 当前 网 页 ， 会 被 监 
听 着 单 击 〈click) 动作 。 当 前 网 页 被 单 击 时 ， 名 称 为 save_xy 的 函数 就 会 被 调用 。 


function save_xy(event) 


{ 


xy_list.push(“  (S$fevent.clientXlj，S$fevent.clientY}) `) ; 
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此 语句 将 类 似 '(36, 47)' 的 字符 串 ， 新 增 至 变量 xy_list 的 数组 实例 中 。 其 中 ，event.clientX 与 
event.clientY 分 别 返 回 了 【用 户 在 当前 网 页 内 ， 单 击 时 】 的 坐标 位 置 的 x 值 与 y 值 。 


Count++ 了 
变量 count 的 数值 被 递增 。 
if (count == 4) 


若 变 量 count 的 数值 等 于 4， 则 意味 着 用 户 已 经 在 当前 网 页 上 ， 单 击 了 4 次， 因此 存在 4 次 单 
击 时 的 坐标 位 置 。 
{ 


document.removeEventListener('click', save xy) ; 


此 语句 通过 调用 函数 removeEventListener()， 使 得 document 对 象 实例 所 代表 的 当前 网 页 ， 被 
移 除 【 监 听 着 单 击 (click) 动作 】 的 处 理 机 制 。 换 言 之 ， 记 录 了 4 个 坐标 位 置 之 后 ， 就 会 立即 停止 
再 继续 记录 。 

console.log(xy list) ; 

显示 出 类 似 ["(36, 47)", "(144, 32)", "(37, 191)", "(142, 191)"] 的 信息 ， 可 看 出 变量 xy_list 当前 代 

表 着 内 含 4 个 坐标 位 置 的 数组 实例 。 
} 


} 
上 述 语法 定义 了 带 有 参数 event 的 函数 save_xy()。 


15.30 ”返回 当前 网 页 中 的 所 有 script 元 素 实例 
构成 的 集合 


通过 属性 document.scripts, 可 返 
示例 。 


当前 网 页 中 的 所 有 script 元 素 实例 构成 的 集合 。 请 参看 如 下 


【15-30-^-document-scripts.html] 


<!DOCTYPE html> 
<html> 
<head> 
<title>document scripts</title> 
<script src= "https://code.jquery.com/jquery-3.2.1.slim.min.js" 
integrity="sha384-KJ302DKt IkvYIK3UENzmM7KCKkRr/rE9/Qpg6aAZGJwFDMVNA/GPpGFF93hXpG5KKN" 
crossorigin="anonymous"></script> 


<script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" 
integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" 
crossorigin="anonymous"></script> 
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<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/ 
bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKT 
fUKjNkCk9SaVuEZf1J" crossorigin="anonymous"></script> 
</head> 
<body> 
</body> 
<script> 
let scripts = document .scripts ; 


console.log(scripts.length) ; 
console.log(scripts) ; 
console.1log('') ; 


console.log(scripts[3] .innerHTML) ; 


</script> 
</html> 


【相关 说 明 】 


<script> 


let scripts = document .scripts ; 


此 语句 声明 了 变量 scripts, 其 初始 数据 为 document.scripts 返回 的 所 有 script 元 素 实例 构成 的 集 


合 。 
console.log(scripts.length) ; 
scripts.length 在 此 返回 了 整数 值 4， 意 味 着 在 当前 网 页 里 ， 存 在 4 个 script 元 素 
console.log(scripts) ; 
显示 出 可 展开 的 【HTMLCollection(4)】 的 信息 。 
console.10g('') ; 
console.log(scripts[3] .innerHTML) ; 
scripts[3] 返 回 了 当前 网 页 中 的 第 4 个 〈 索 引 值 为 3) script 元 素 实例 ; scripts[3].innerHTML 进 
一 步 返 回 上 述 script 元 素 实例 中 的 所 有 JavaScript 源 代码 片段 。 


15.31 访问 当前 网 页 的 标题 文本 


通过 属性 document.title， 可 设置 或 者 获取 当前 网 页 的 标题 〈title) 文本 。 请 参看 如 下 示例 。 
【15-31-^-document-title.html 】 


<!DOCTYPE html> 
<htm1> 
<head> 
<title>document title</title> 
</head> 
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<body> 

</body> 

<script> 
console.log(document.title) ; 
console.10g('') ; 


document .title = "Funny Place' ; 
console.log(document.title) ; 


</script> 
</html> 


【相关 说 明 】 


<script> 


console.log(document.title) : 


document.title 返回 当前 网 页 的 标题 文本 。 


Console.1og('') ; 


document ,title = "Funny Place' ; 


此 语句 将 字符 串 Funny Place'， 赋 给 代表 当前 网 页 的 document 对 象 实例 的 属性 title， 使 得 当前 
网 页 的 标题 文本 ， 更 改 为 'Funny Place'。 


15.32 练 习 题 


1. 已 知 如 下 JavaScript 源 代 码 片段 : 


function display(event) 
{ 

| 
} 


form01.addEventListener('click', display) ; 

试 将 上 述 源 代码 片段 ， 改 写成 为 不 调用 函数 addEventListener() 的 等 价 语句 ， 使 得 form01 代表 
的 form 元 素 实例 ， 被 单 击 时 ， 函 数 display0 即 会 被 调用 。 

2. 已 知 如 下 源 代码 语句 : 

current_ref = document .getElementById('div01') ; 


在 不 修改 变量 名 称 current_ref 和 任何 符号 的 情况 下 ， 试 改写 上 述 语句 ， 成 为 更 简短 的 等 价 语 


3. 已 知 如 下 源 代码 片段 : 


username .style.color = 'RoyalBlue' ; 
username .style.backgroundColor = 'GoldenRod' ; 
username .style.padding = '5px' ; 
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username .style.margin = '10px' ; 
username .style.fontSize = '30px' ; 


在 不 修改 属性 id 的 数据 为 字符 串 '"username'， 以 及 不 修改 任何 符号 的 情况 下 ， 试 改写 上 述 源 代 
码 片段 ， 成 为 更 简短 的 等 价 语法 。 


第 16 章 


DOM 的 元 素 实 例 


:网 页 中 的 任意 元 素 实 例 ， 均 可 被 视 为 在 文档 对 象 模型 (DOM, document object model) 
中 的 元 素 实例 (element instance) 。 通 过 被 内 置 在 各 元 素 实例 中 的 属性 和 函数 ， 可 访问 各 元 素 实例 
的 相关 数据 。 


16.1 设置 焦点 跳 转 至 特定 元 素 实例 上 的 快捷 键 


现在 的 浏览 器 均 支 持 【在 特定 网 页 上 , 将 焦点 (focus) 移 至 特定 元 素 实例 上 】 的 快捷 键 (shortcut 
/ hot key) ， 以 代 蔡 费时 的 鼠标 操作 。 请 参看 如 下 示例 。 
【16-1-^-DOM-accessKey.html】 


<!DOCTYPE html> 
<html> 
<head> 
<title>DOM accessKey</title> 
<style> 
a 
{ 
display: inner-block ; 
margin: 5px ; 


} 


[id^=div] 

{ 

display: block ; 
padding: 10px ; 
height: 500px ; 
} 
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password.accessKey = 'p' ; 
</script> 
</html> 


【相关 说 明 】 


<script> 


let links = document.links ; 
此 语句 声明 了 变量 links， 其 初始 数据 为 document.links 返回 的 所 有 超 链 接 (hyperlink) 元 素 实 
例 所 构成 的 集合 。 
【 <a href="#a03">To a03</a> 】 才 算是 代表 超 链接 的 a 元 素 实例 ; 然而 ，【 <a 
name="a03">a03</a>】 并 不 代表 超 链接 ， 而 是 代表 锚 点 (anchor) 的 a 元 素 实例 。 
console.log(links.length) ; 
links.length 在 此 返回 整数 值 6， 意 味 着 在 当前 网 页 中 ， 总 共有 6 个 超 链接 元 素 实例 。 
links[2].accessKey = '3' }; 
links[2] 在 此 会 返回 【在 变量 links 的 集合 中 ， 其 第 3 个 〈 索 引 值 为 2) 】 的 超 链接 元 素 实 例 。 
此 语句 将 字符 3'， 赋 给 上 述 超 链接 元 素 实例 的 属性 accessKey， 使 得 按 下 快捷 键 【Alt+ 键盘 上 方 的 
数字 键 3】 的 效果 ， 等 价 于 单 击 在 网 页 上 带 有 【To a03】 字 样 的 上 述 超 链接 元 素 实 例 。 
links[3].accessKey = '4' ; 
links[3] 在 此 会 返回 【在 变量 links 的 集合 中 ， 其 第 4 个 〈 索 引 值 为 3) 】 的 超 链接 元 素 实 
此 语句 将 字符 4 ， 赋 给 上 述 超 链接 元 素 实例 的 属性 accessKey， 使 得 按 下 快捷 键 【Alt+ 键盘 上 方 的 
数字 键 4】 的 效果 ， 等 价 于 单 击 在 网 页 上 带 有 【To a04】 字 样 的 上 述 超 链接 元 素 实例 。 
links[4].accessKey = '5' ; 
links[4] 在 此 会 返回 【在 变量 links 的 集合 中 ， 其 第 5 个 〈 索 引 值 为 4) 】 的 超 链 接 元 素 实例 。 
此 语句 将 字符 '$'， 赋 给 上 述 超 链接 元 素 实 例 的 属性 accessKey， 使 得 按 下 快捷 键 【Alt + 键盘 上 方 的 
数字 键 5】 的 效果 ， 等 价 于 单 击 在 网 页 上 带 有 【To a05】 人 字样 的 上 述 超 链接 元 素 实例 。 
username.accessKey = 'u' ; 
此 语句 将 字符 WW， 赋 给 属性 id 的 数据 为 username' 的 input 元 素 实例 的 属性 accessKey， 使 得 按 
下 快捷 键 【Alt+u]】 的 效果 ， 等 价 于 单 击 在 网 页 上 其 属性 id 的 数据 为 "username' 的 input 元 素 实例 。 
password.accessKey = 'p' ; 
将 字符 p'， 赋 给 属性 id 的 数据 为 password 的 input 元 素 实例 的 属性 accessSKey， 使 得 按 下 快捷 
键 【Alt+p】 的 效果 ， 等 价 于 单 击 在 网 页 上 其 属性 id 的 数据 为 password' 的 input 元 素 实例 。 


16.2 ”创建 特定 元 素 实 例 的 动画 效果 (Web Animations ) 


通过 【特定 元 素 实 例 的 id】 衔 接 函 数 【.animate()】 的 调用 ， 可 创建 特定 元 素 实例 的 动画 效果 。 
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请 参看 如 下 示例 。 
【16-2-^-DOM-animate.html】 


<!DOCTYPE html> 
<html> 
<head> 
<title>DOM animate ()</title> 
<style> 
@keyframes text color 
{ 
from{color: Gold ;} 
to{color: RoyalBlue ;} 
} 


#div01 
{ 
font-size: 2em ; 
animation: text color 2s 3 ，; 
} 
</style> 
</head> 
<body> 
<div id="div01">Hello</div> 
</body> 
<script> 
let frame01 = {transform: 'translateY(0px)'} ; 
let frame02 = {transform: 'translateY(20px)'} ; 
let keyframes = [frame01，frame02] ; 
let options = {duration: 1000, iterations: 4, direction: 


div0l.animate (keyframes, options) ; 


</script> 
</html> 


【相关 说 明 】 


<script> 


let frame01 = {transform: 'translateY(0px)'} ; 


'alternate', easing: 'ease-in-out'}; 


此 语句 声明 变量 frame01， 其 初始 数据 为 内 含 属性 transform 及 其 数据 字符 串 'translateY(Opx)' 
的 对 象 实例 。 在 此 ， 对 象 实例 的 属性 transform 是 对 应 到 CSS 样式 里 的 属性 transform， 并 代表 着 特 
定 转变 (transform) 动画 ; 而 其 属性 transform 的 数据 字符 串 'translateY(0px)， 代 表 y 值 为 0 像素 的 


坐标 位 置 ， 并 且 意 味 着 特定 元 素 实例 的 位 移 (translate) 起 点 。 


let frame02 = {transform: 'translateY(20px)'} ; 


此 语句 声明 了 变量 frame02, 其 初始 数据 为 内 含 属性 transform 及 其 数据 字符 串 'translateY(20px)' 
的 对 象 实例 。 在 此 , 属性 transform 的 数据 字符 串 'translateY(20px)', 代表 y 值 为 20 像素 的 坐标 位 置 ， 


并 且 意 味 着 特定 元 素 实例 的 位 移 终点 。 


let keyframes = [frame01，frame02] ; 


此 语句 声明 了 变量 keyframes， 其 初始 数据 为 内 含 变 量 frame01 和 frame02 分 别 代表 的 对 象 实 
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例 的 数组 实例 。 
let options = {duration: 1000, iterations: 4, direction: 'alternate', easing: 'ease-in-out'} ; 
此 语句 声明 了 变量 options， 其 初始 数据 为 对 象 实例 fduration: 1000，iterations: 4,direction: 
'alternate', easing: 'ease-in-out} 。 其 中 : 
@ 属性 duration 的 数值 为 1000， 用 来 设置 动画 的 时 间 长 度 (duration ) 为 1000 毫秒 (1 秒 )。 
@ 属性 iterations 的 数值 为 4， 用 来 设置 动画 和 代 (iteration ) / 播放 的 次 数 为 4。 
@ 属性 direction 的 数据 字符 串 为 'alternate'， 用 来 设置 动画 的 方向 (direction ) 为 【从 头 到 尾 ， 再 
从 尾 逆向 到 头 〗 的 来 回 交 替 (alternate )。 
div01.animate (keyframes, options) ; 
此 语句 在 属性 id 的 数据 为 'div01' 的 div 元 素 实例 中 ， 正 式 设置 其 动画 成 为 【变量 keyframes 的 
数组 实例 和 options 的 对 象 实例 】 所 定义 的 模样 。 


16.3 ”添加 新 元 素 实 例 和 访问 特定 元 素 实 例 的 
所 有 属性 


通过 【document.body】 或 【数据 为 特定 元 素 实例 的 变量 名 称 】， 衔 接 函 数 【.appendChild()】 
的 调用 ， 可 添加 新 元 素 实例 ， 至 当前 网 页 中 的 body 元 例 或 者 特定 元 素 实例 中 ， 进 而 成 为 其 内 
部 的 子 元 素 实例 。 通 过 【数据 为 特定 元 素 实 例 的 变量 名 称 】 衔 接 属性 【.attributes】， 则 可 访问 特定 
元 素 实例 的 各 属性 。 请 参看 如 下 示例 。 

【16-3-^-DOM-appendChild-and-attributes.html】 


<!DOCTYPE html> 
<html> 
<head> 
<title>DOM appendChild() and attributes</title> 
</head> 
<body> 
</body> 
<script> 


let ref = document.createElement ('h1l') ; 


ref.innerHTML = "Box World' ; 


with (ref.style) 

{ 
color = 'RoyalBlue' ; 
textDecoration = 'underline' ; 


} 


document .body .appendChild (ref) ; 
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<script> 


let ref = document .createElement ('h1') 


此 语句 声明 了 变量 ref， 其 初始 数据 为 document.createElement(h1) 返 回 的 新 的 hl 元 素 实例 。 


ref.innerHTML = "Box World' ; 


此 语句 将 字符 串 'Box World'， 赋 给 变量 ref 当前 代表 的 hl 元 素 实 例 的 属性 innerHTML， 使 得 
hl 元 素 实例 在 网 页 上 ， 呈 现 出 文本 'Box World'。 


with (ref.style) 
{ 
color = 'RoyalBlue' ; 
textDecoration = "underline' ; 
} 


已 


语法 等 同 于 执行 了 【refstyle.color = 'RoyalBlue' ;】 和 【ref.style.textDecoration = 'underline' ; 】。 
document .body.appendchild (ref) ; 
此 语句 将 变量 ref 当前 代表 的 hl 元 素 实 例 ， 新 增 至 body 元 素 实例 中 ， 正 式 呈 现在 网 页 上 。 


ref = document.createElement('div') ; 


此 语句 将 document.createElement(div) 所 返回 的 新 的 div 元 素 实 例 ， 赋 给 变量 ref。 
ref.innerHTML = 'Be diligent' ? 

此 语句 将 字符 串 'Be diligent， 赋 给 变量 ref 当前 代表 的 div 元 素 实例 的 属性 innerHTML， 使 得 
div 元 素 实例 在 网 页 上 ， 呈 现 出 文本 'Be diligent'。 


ref.id = "big_block' ; 


此 语句 将 字符 串 'big_block'， 赋 给 变量 ref 当前 代表 的 div 元 素 实例 的 属性 id， 使 得 此 div 元 素 
实例 的 属性 id 的 数据 ， 成 为 'big_block'。 


with (ref.style) 

{ 
color = 'Gold' ; 
backgroundColor = 'RoyalBlue' ; 
width = height = '110px' ; 
textAlign = 'center' ; 
margin = "auto' ; 
padding = 'S5px' ; 

} 


此 语法 简化 了 类 似 【ref.style.color ='Gold' ;】 等 语句 ， 成 为 在 大 括号 里 的 【color ='Gold' ;】 等 
语句 ， 以 设置 变量 ref 代表 的 div 元 素 实例 ， 呈 现在 网 页 上 的 各 个 外 观 。 


document .body .appendChild (ref) ; 


此 语句 将 变量 ref 当前 代表 的 div 元 素 实例 ， 新 增 至 body 元 素 实 例 中 ， 以 正式 呈现 在 网 页 上 。 


ref = document.createElement ('h3') ; 


此 语句 将 document.createElement('h3") 所 返 


互 


的 新 的 h3 元 素 实例 ， 赋 给 变量 ref。 
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ref.innerHTML = "Great' ; 


此 语句 将 字符 串 'Great， 赋 给 变量 ref 当前 代表 的 h3 元 素 实例 的 属性 innerHTML， 使 得 h3 元 
素 实例 在 网 页 上 ， 呈 现 出 文本 'Great 。 
ref.id = "small block' ; 


此 语句 将 字符 串 'small_block', 赋 给 变量 ref 当前 代表 的 h3 元 素 实例 的 属性 id, 使 得 此 h3 元 素 
实例 的 属性 id 的 数据 ， 成 为 'small_block'。 

with (ref.style) 

{ 
color = 'GreenYellow' ; 
background = 'ForestGreen' ; 
width = height = '60px' ; 
textAlign = 'center' ; 
margin = '10px auto' ; 
borderRadius = '10px' ; 
padding = 'S5px' ; 

} 


语法 简化 了 类 似 【refstyle.color = 'GreenYellow' ;】 等 语句 ， 成 为 大 括号 里 【color = 
'GreenYellow' ;】 等 语句 ， 以 设置 变量 ref 当前 代表 的 h3 元 素 实例 ， 在 网 页 上 的 各 个 外 观 。 

big block.appendChild (ref) ; 
语句 将 变量 ref 当前 代表 的 h3 元 素 实例 ， 新 增 至 属性 id 的 数据 为 'big_block' 的 div 元 素 实例 
中 ， 以 正式 呈现 在 上 述 div 元 素 实例 的 范围 里 。 


console.log(small block.attributes) ; 


下 


所 


下 


语句 显示 出 【NamedNodeMap {0: id, 1: style, id: id, style: style, length: 2}】 的 信息 ， 意 味 着 
small_block.attributes 返回 的 ， 是 属性 id 的 数据 为 'small_block' 的 div 元 素 实例 中 的 NamedNodeMap 
对 象 实例 。 


console.10g('') ; 


console.log(small block.attributes.length) ; 
small_block.attributes.length 当前 返回 整数 值 2， 意 味 着 在 属性 id 的 数据 为 'small_block' 的 div 
元 素 实例 中 ， 存 在 两 个 可 对 应 至 HTML 语法 的 属性 〈attribute) ， 也 就 是 属性 id 与 style。 
包括 JavaScript 语言 的 属性 innerHTML 和 其 他 未 在 本 示例 中 被 设置 的 属性 ， 因 为 无 法 对 应 到 
特定 HTML 语言 的 属性 , 所 以 并 不 包含 在 small_block.attributes.length 中 的 属性 个 数 的 计算 行列 中 ! 


console.10g('') ; 


console.log(small block.attributes[0]) ; 


显示 出 【id="small_block"】 的 信息 。 


console.log(small block.attributes[0] .nodeValue) ; 


small_block.attributes[0].nodeValue 当前 返回 字符 串 'small_block'。 其 中 ，nodeValue 的 数据 ， 即 
是 代表 特定 属性 的 节点 (node) 实例 的 值 (value) 。 在 此 ， 其 nodeValue 的 数据 ， 是 属性 id 的 数 
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据 字符 串 'small block 。 


console.10g('') ; 
console.log(small block.attributes[1]) ; 


显示 出 【style="color: greenyellow; background: forestgreen; height: 60px:; width: 60px: text-align: 
center; margin: 10px auto; border-radius: 10px; padding: Spx:"】 的 信息 。 


console.log(small block.attributes[1].nodeValue) ; 


small_block.attributes[1].nodeValue 当前 返回 字符 串 'color: greenyellow; background: forestgreen; 
height: 60px; width: 60px; text-align: center; margin: 10px auto; border-radius: 10px; padding: Spx;'。 
在 此 ,nodeValue 的 数据 , 是 属性 style 的 数据 字符 串 'color: greenyellow; background: forestgreen; 


height: 60px; width: 60px; text-align: center; margin: 10px auto; border-radius: 10px; padding: Spx;'。 


16.4 ”使 得 特定 元 素 实例 失去 和 获取 焦点 


通过 【数据 为 特定 元 素 实例 的 变量 名 称 
获取 焦点 (focus〉; 通过 【数据 为 特 
得 特定 元 例 失去 焦点 。 请 参看 如 下 示例 。 

【16-4-^-DOM-blur-and-focus.html]】 


<!DOCTYPE html> 


】 衔 接 函 数 【.focus(】 的 调用 ， 可 使 得 特定 元 素 实例 
的 变量 名 称 】 衔 接 函 数 【.blur0】 的 调用 ， 则 可 使 


<html> 
<head> 
<title>DOM blur() and focus()</title> 
<style> 
a, [type=text], [type=button] 


{ 
margin: 5Px ; 
} 
</style> 
</head> 
<body align="center"> 
<a href="#">Link 1</a> 
<a href="#">Link 2</a> 
<a href="#">Link 3</a> 
<a href="#">Link 4</a> 
<a href="#">Link 5</a> 


<p></p> 

<input type="text"> 
<input type="text"> 
<input type="text"> 


<p></p> 
<button type="button">Button 1</button> 
<button type="button">Button 2</button> 
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<button type="button">Button 3</button> 
</body> 
<script> 


let refs = document .querySelectorAll('a, [type=text], button') ; 
let index = 0 


console.log(refs.length) ; 


/1/1 
let interval no = setInterval (focus next, 500) ; 


function focus next () 
{ 
refs[index] .focus() ; 


index = index < refs.length - 1 ? index +1 :0 
} 


/1 
setTimeout (blur all, 7000) ; 


function blur alll() 
{ 
clearInterval (interval no) ; 


refs[index - 1].blur() ; 
} 
</script> 
</html> 


【相关 说 明 】 


<script> 


let refs = document .querySelectorAll('a, [type=text], button') ; 


此 语句 声明 了 变量 refs， 其 初始 数据 为 document.querySelectorAll('a, [type=text], button') 所 返 上 
的 多 个 元 素 实 例 构 成 的 集合 。 被 传 入 函数 document.querySelectorAll('a, [type=text], button") 的 参数 数 
据 字符 串 'a, [type=text], button', 是 CSS 选择 器 名 称 (selector name) 的 字符 串 , 在 此 代表 选择 了 【在 
当前 网 页 中 ， 元 素 / 标 签名 称 为 'a、 属 性 type 为 'text"， 或 者 元 素 /标签 名 称 为 button】 的 所 有 元 素 实 
例 。 


let index = 0 
此 语句 声明 了 初始 值 为 0 的 变量 index。 
console.log(refs.length) ; 
refs.length 返回 整数 值 11， 意 味 着 在 变量 refs 的 集合 中 ， 内 含 5 个 作为 超 链接 的 元 素 实例 、3 
个 作为 文本 字段 的 input 元 素 实例 ， 以 及 3 个 作为 按钮 的 button 元 素 实例 ， 共 计 11 个 元 素 实例 。 


let interval no = setInterval (focus next, 500) ; 


此 语句 声明 了 变量 interval_ no， 其 初始 数据 为 setInterval(focus_next, 500) 所 返 


s 


的 整数 值 〈 例 
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如 2) 。 此 整数 值 代表 【间接 定时 调用 其 名 称 为 focus_next 的 函数 】 的 动作 编号 。 在 此 语句 的 等 号 
右 侧 ， 调 用 而 执行 了 内 置 的 全 局 函数 setInterval(focus_next, 500)， 进 而 每 隔 500 毫秒 〈 半 秒 ) ， 就 
间接 调用 其 名 称 为 focus_next 的 函数 一 次 。 


function focus next () 
. 


refs[index] .focus() ; 
此 语句 使 得 变量 refs 中 的 第 index + 1 个 (索引 值 为 变量 index 的 数值 ) 的 元 素 实 例 ， 在 网 页 
上 ， 获 得 焦点 而 呈现 出 其 动态 外 框 。 
index = index < refs.length - 1? index +1: 01 
此 语句 使 得 变量 index 的 数值 ， 介 于 0~ 10 之 间 。 
} 
上 述 语法 定义 了 函数 focus_next()。 
setTimeout (blur all, 7000) ; 
此 语句 调用 了 内 置 的 全 局 函数 setTimeout()， 并 在 执行 此 语句 的 7000 毫秒 (7 秒 ) 之 后 ， 再 间 
接 调 用 其 名 称 为 blur_all 的 函数 。 


function blur alll() 
{ 


clearInterval (interval no) ; 


此 语句 调用 了 内 置 的 全 局 函数 clearInterval()， 进 而 移 除 【动作 编号 为 变量 interval_no 的 数值 】 
的 定时 调用 动作 。 
refs[index - 1].blur() ; 
此 语句 使 得 变量 refs 中 的 第 index - 1+ 1 个 (索引 值 为 变量 index 的 数值 ， 再 减 去 1) 的 元 素 
实例 ， 在 网 页 上 【失去 】 焦 点 而 被 去 除 其 动态 外 框 。 
} 
上 述 语 法 定义 了 函数 blur_all0。 


16.5 访问 子 节点 或 子 元 素 的 实例 


通过 【数据 为 特定 元 素 实例 的 变量 名 称 】: 

”衔接 【.childNodes]， 可 访问 特定 元 素 实例 的 子 节 点 实例 。 

”衔接 【.children】〗， 可 访问 特定 元 素 实 例 内 的 子 元 素 实 例 。 

@ ”衔接 【.childElementCount])， 可 获取 特定 元 素 实例 内 的 子 元 素 实 例 的 个 数 。 
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关于 访问 子 节点 或 子 元 素 的 实例 的 综合 运用 ， 请 参看 如 下 示例 。 
【16-5-^-child-nodes-and-elements.html】 
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// div01.children.item(1) .style.textDecoration = "line-through' ; 
div01.children[1] .style.textDecoration = 'line-through' 7 
} 
</script> 
</html> 


【相关 说 明 】 


<script> 
with (console) 
{ 


log (document .body.childElementCount) ; 


document.body.childElementCount 会 返回 body 元 素 实例 中 的 子 元 素 (child element) 实例 的 个 
数 4。 


log (div0l.childElementCount) ; 
div01.childElementCount 会 返回 【在 属性 id 的 数据 为 'div01' 的 div 元 素 实例 中 ,其 子 元 素 实 例 】 
的 个 数 3。 
log (div02.childElementCount) ; 
div02.childElementCount 会 返回 【在 属性 id 的 数据 为 'div02' 的 div 元 素 实 例 中 , 其 子 元 素 实 例 】 
的 个 数 2。 


log(''); 


log (document .body.childNodes) ; 


此 语句 显示 出 可 展开 的 【NodeList(8)】 的 信息 ， 代 表 body 元 素 实例 内 含 8 个 节点 实例 。 
document.body.childNodes 会 返回 NodeList( 节 点 表 ) 对 象 实例 [text, hl, text, div#div01, text, div#div02, 
text, script, text]。 其 中 ，text 意味 着 其 为 文本 节点 实例 ;而 script 意味 着 其 为 原本 被 放 在 body 元 素 
实例 下 方 的 script 元 素 实例 ， 并 事后 被 浏览 器 动态 搬移 到 body 元 素 实例 内 。 

在 body 元 素 实 例 的 起 始 语 句 【<body>】 到 其 内 部 第 1 个 子 元 素 实例 的 起 始 语句 【<h1l>】 之 间 ， 
所 存在 的 换行 (line feed) 和 空格 (space) 字符 ， 构 成 了 1 个 文本 节点 实例 。 同 样 的 ， 第 1 个 子 元 
素 实 例 的 结束 语句 【</h1>】 到 第 2 个子 元 素 实例 的 开始 语句 【<div id="div01">】 之 间 ， 所 存在 的 
换行 和 空格 字符 ， 构 成 了 第 2 个 文本 节点 实例 ， 以 此 类 推 。 

log (div01.childNodes) ; 


此 语句 显示 出 可 展开 的 【NodeList(7)】 的 信息 ， 意 味 着 在 属性 id 的 数据 为 'div01' 的 div 元 素 实 
例 中 ， 存 在 7 个 节点 实例 : 其 中 3 个 是 元 素 实例 ， 另 外 4 个 为 【 介 于 元 素 实例 之 间 )】 的 文本 节点 实 
例 。 


当 


log (div02.childNodes) ; 
此 语句 显示 出 可 展开 的 【NodeList(5)】 的 信息 ， os 属性 id 的 数据 为 'div02' 的 div 元 
例 中 ， 存 在 5 个 节点 实例 : 其 中 两 个 是 元 素 实 例 ， 另 外 3 个 是 【 介 于 元 素 实例 之 间 】 的 文本 节 
例 。 


素 实 
点 实 
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log('') 


log (document .body.children) ; 
语句 显示 出 可 展开 的 【HTMLCollection(4)】 的 信息 ， 意 味 着 在 body 元 素 实例 中 ， 存 在 4 个 
子 元 素 实 例 。 其 中 ， 包 含 1 个 hl 元 素 实例 、2 个 div 元 素 实例 ， 以 及 1 个 script 元 素 实例 。 

log (div01l.children) ; 
语句 显示 出 可 展开 的 【HTMLCollection(3)】 的 信息 ， 意 味 着 在 属性 id 的 数据 为 'div01' 的 div 
元 素 实 例 中 ， 存 在 3 个 a 子 元 素 实例 。 
log (div02.children) ; 
此 语句 显示 出 可 展开 的 【HTMLCollection(2)】 的 信息 ， 意 味 着 在 属性 id 的 数据 为 div02' 的 div 
元 素 实例 中 ， 存 在 2 个 子 元 素 实例 。 其 中 ,包含 1 个 ul 元素 实例 和 1 个 ol 元 素 实例 。 


lo0g('') 


// div0l.children.item(0) .style.textDecoration = 'overline' ; 
div01l.children[0] .style.textDecoration = 'overline' ; 


div01.children[0] 可 返回 【在 属性 id 的 数据 为 'div01' 的 div 元 素 实 例 中 , 其 第 1 个 (索引 值 为 0) 】 
的 a 元 素 实例 。 此 语句 可 设置 上 述 a 元 素 实例 , 具有 上 画 线 (overline) 的 文本 装饰 (text decoration ) 。 


// div0l.children.item(1) .style.textDecoration = 'line-through’' ; 
div0l.childqren[1] .style.textDecoration = 'line-through' ;} 


div0l.children[1] 可 返回 【在 属性 id 的 数据 为 'div01' 的 div 元 素 实例 中 , 其 第 2 个 (索引 值 为 1)】 
的 a 元 素 实例 。 此 语句 可 设置 上 述 a 元 素 实例 ， 具 有 删除 线 (line-through〉 的 文本 装饰 text 
decoration) 。 


16.6 访问 被 应 用 在 特定 元 素 实 例 的 所 有 CSS 类 名 


通过 【数据 为 特定 元 素 实 例 的 变量 名 称 】 衔 接 【.classList】 或 【.className】， 可 访问 被 应 用 
在 特定 元 素 实例 上 的 所 有 CSS 类 名 。 

通过 【数据 为 特定 元 素 实例 的 变量 名 称 】 衔 接 函 数 【.toggle0】 的 调用 ， 可 切换 (toggle) 被 
应 用 在 特定 元 素 实例 上 的 CSS 类 名 的 存在 性 。 

关于 其 综合 运用 ， 请 参看 如 下 示例 。 

【16-6-^-DOM-classList-and-className.html]) 


<!DOCTYPE html> 
<html> 
<head> 
<title>DOM classList and className</title> 
<style> 
.Color 


{ 
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div05.classList.toggle('size') ; 
div05.classList.toggle('border') ; 


console.log(div05.className) ; 
console.log(div05.classList) ; 
console.log(div05.classList.length) ; 
</script> 
</html> 


【相关 说 明 】 


<script> 


div01.className = 'color' ; 
此 语句 将 字符 串 'color， 赋 给 属性 id 的 数据 为 div01' 的 div 元 素 实例 的 属性 className。 此 语句 
被 执行 之 后 ,会 使 得 上 述 div 元 素 实例 ， 从 【 <div id="div01">Good</div> 】 变 成 【<div 
id="div01"class="color">Good</div>】。 
请 留意 ， 在 JavaScript 源 代码 中 ， 名 称 为 className 的 属性 〈property) ， 对 应 到 在 HTML 源 
代码 里 ， 其 名 称 为 class 的 属性 (Cattribute) 。 


其 中 ，【class="color"】 的 语法 ， 会 让 上 述 div 元 素 实例 ， 被 应 用 CSS 类 名 (class name) 为 
color 的 CSS 类 样式 (class style) ， 使 得 其 字体 颜色 ， 成 为 黄花 〈golden rod) 的 颜色 ， 而 其 背景 颜 
色 ， 成 为 金色 (gold) 。 


div02.className = 'color size' ; 
语句 将 字符 串 'color size'， 赋 给 属性 id 的 数据 为 div02' 的 div 元 素 实例 的 属性 className。 此 
语句 被 执行 之 后 ， 会 使 得 上 述 div 元 素 实 例 ， 从 【<div id="div02">Nice</div>】 变 成 【 <div 
id="div02"class="color size">Nice</div>】。 其 中 ，【class="color size"】 的 语法 ， 会 让 上 述 div 元 
素 实 例 ， 同 时 被 应 用 CSS 类 名 为 color 和 size 的 CSS 类 样式 。 
div03.className = 'color size alignment' ; 
语句 将 字符 串 'color size alignment ， 赋 给 属性 id 的 数据 为 'div03' 的 div 元 素 实例 的 属性 
className。 此 语句 被 执行 之 后 ， 会 使 得 上 述 div 元 素 实例 ， 从 【<div id="div03">Great</div>】 变 
成 【<div id="div03"class="color size alignment">Great</div>】。 其 中 ,【class="color size alignment"】 
的 语法 ， 会 让 上 述 div 元 素 实 例 ， 同 时 被 应 用 CSS 类 名 为 color、size 与 alignment 的 CSS 类 样式 。 
div04.className = "color size alignment border' ; 

此 语句 将 字符 串 'color size alignment border ， 赋 给 属性 id 的 数据 为 "div04' 的 div 元 素 实 例 的 属 
性 className。 此 语句 被 执行 之 后 , 会 使 得 上 述 div 元 素 实例 ,从 【<div id="div04">Fantastic</div>】 
变 成 【<div id="div04"class="color size alignment border">Fantastic</div>】。 其 中 ，【class="color 
size alignment border" 的 语法 ,会 让 上 述 div 元 素 实例 ,同时 被 应 用 CSS 类 名 为 color、 size、alignment 
与 border 的 CSS 类 样式 。 


console.log(div01.className) ; 


已 


div01.className 返回 字符 串 'color 。 
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console.log(div02.className) ; 


div02.className 返回 字符 串 'color size'。 


console.log(div03.className) ; 


console.log(div04.className) ; 


console.1log('') ; 


div05.className = 'color' ; 


div05.classList.add('size') ; 


div03.className 返回 字符 串 'color size alignment'。 


div04.className 返回 字符 串 'color size alignment border'。 


此 语句 将 字符 串 'color， 赋 给 属性 id 的 数据 为 'div05' 的 div 元 素 实例 的 属性 className， 使 得 上 
述 div 元 素 实例 ， 变 成 【<div id="div05"class="color">Tested Block</div>】。 


此 语句 将 字符 串 'size', 新 增 至 属性 id 的 数据 为 'div05' 的 div 元 素 实例 的 CSS 类 列表 (class list) 


里 ， 使 得 上 述 div 元 素 实例 ， 变 成 【<div id="div05" class="color size">Tested Block</div>】。 


div05.classList.add('alignment', 'border') ; 


此 语句 将 字符 串 'alignment' 与 'border"， 新 增 至 属性 id 的 数 


据 为 'div05' 的 div 元 素 实例 的 CSS 类 


列表 里 ， 使 得 上 述 div 元 素 实例 ， 变 成 【<div id="div05" class="color size alignment border">Tested 


Block</div>】。 


div05.classList.remove('color', 


语句 在 属性 id 的 数据 为 'div05' 的 div 元 素 实例 的 CSS 类 列表 中 ， 移 除了 CSS 类 名 color 与 


"size') 7 


size, 使 得 上 述 div 元 素 实例 , 变 成 【<div id="div05"class="alignment border">Tested Block</div>】。 


console.log(div05.classList.contains('size')) ; 


div05.classList.contains('size'") 返 回 布尔 值 false， 意 味 着 在 
例 的 CSS 类 列表 'alignment border 里 ， 当 前 并 


console.log(div05.classList.contains ("border')) ; 


div05.classList.contains('border') 返 回 


console.10g('') ; 


属性 id 的 数据 为 div05' 的 div 元 素 实 


F 不 包含 (contain) CSS 类 名 size。 


布尔 值 tue, 意味 着 在 属性 id 的 数据 为 'div05' 的 div 元 素 实 
例 的 CSS 类 列表 'alignment border' 里 ， 当 前 包含 CSS 类 名 border。 


div05.classList.toggle('size') ; 


此 语句 在 属性 id 的 数据 为 div05' 的 div 元 素 实例 的 CSS 类 列表 里 ， 进 行 了 【包含 / 不 包含 】 
CSS 类 名 size 的 切换 (toggle) 。 因 为 在 上 述 div 元 素 实例 当前 的 CSS 类 列表 'alignment border' 里 ， 


id="div05" class="alignment border size">Tested Block</div>】。 


div05.classList.toggle('border 


3 


不 包含 CSS 类 名 size, 所 以 会 被 切换 成 为 包含 CSS 类 名 size, 使 得 上 述 div 元 素 实例 , 变 成 【<div 
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此 语句 在 属性 id 的 数据 为 'div05' 的 div 元 素 实例 的 CSS 类 列表 里 ， 进 行 了 【包含 / 不 包含 】 
CSS 类 名 border 的 切换 。 因 为 在 上 述 div 元 素 实例 当前 的 CSS 类 列表 'alignment border size 里， 包 
含 了 CSS 类 名 border， 所 以 会 被 切换 成 为 不 包含 CSS 类 名 border， 使 得 上 述 div 元 素 实例 ， 变 成 

【<div id="div05"class="alignment size">Tested Block</div>】。 


console.log(div05.className) ; 


div05.className 在 此 返回 字符 串 'alignment size'。 


console.log(div05.classList) ; 
显示 出 可 展开 的 【DOMTokenList(2) ["alignment", "size", value: "alignment size"]】 的 信息 。 
console.log(div05.classList.length) ; 


div05.classList.length 在 此 返回 整数 值 2, 意味 着 在 属性 id 的 数据 为 'div05' 的 div 元 素 实例 的 CSS 
类 列表 里 ， 当 前 内 含 2 个 CSS 类 名 ， 也 就 是 alignment 与 size。 


16.7 ”模拟 鼠标 单 击 特定 元 素 实例 的 动作 


通过 【数据 为 特定 元 素 实例 的 变量 名 称 】 衔 接 函 数 【.click0】 的 调用 ， 可 模拟 用 户 借助 鼠标 ， 
以 单 击 特定 元 素 实例 的 动作 。 请 参看 如 下 示例 。 
【16-7-^-DOM-click.html]】 


<!DOCTYPE html> 
<html> 
<head> 
<title>DOM click()</title> 
<style> 
input, button, select 
{ 


font-size: 1.2em ; 


margin: 5Px ; 
} 
</style> 
</head> 
<body> 
<form id="form01" name="form01" style="text-align: center;"> 
<h3> 个 人 资料 </h3> 
<input type="text" id="username" name="username" placeholder="username" size="16" 
required> 
<input type="password" id="password" name="password" placeholder="password" size="16" 
required> 
<p></p> 


<label>I am not a robot</label> 
<input type="checkbox" id="check01" onmouseover="" onclick=""> 


<p></p> 
<button type="submit">Login</button> 
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<button type="reset">Reset</button> 
</form> 
</body> 
<script> 
setTimeout (() => check01.click(), 2000) ; 


check01 .onclick = () => console.1og('check01 is automatically checked.') ; 
</script> 
</html> 


【相关 说 明 】 
<script> 
setTimeout (() => check01.click(), 2000) ; 
此 语句 设置 了 在 2000 毫秒 (2 秒 ) 之 后 ， 间 接 调 用 箭头 函数 【() => check01.click0】。 上 述 箭 
头 函 数 被 调用 时 , 会 间接 调用 check01.click(), 如 同 单 击 (click) 了 属性 id 的 数据 为 'check01' 的 input 
元 素 实 例 一样 ， 使 得 上 述 input 元 素 实例 所 代表 的 复 选 框 (checkbox) 被 选中 。 
check01.onclick = () => console.1og('check01 is clicked to be checked.') ; 
此 语句 将 等 号 右 侧 的 箭头 函数 的 定义 ， 赋 给 了 属性 id 的 数据 为 'check01' 的 input 元 素 实例 的 属 
性 onlick， 使 得 上 述 input 元 素 实例 ， 被 单 击 时 ， 即 会 调用 上 述 箭头 函数 ， 并 显示 出 【check01 is 
automatically checked.】 的 信息 。 


16.8 获取 特定 元 素 的 尺寸 、 坐标 与 可 定位 的 上 层 元 素 


通过 【数据 为 特定 元 素 实例 的 变量 名 称 】: 

”衔接 【.clientWidth】、【.clientHeight】、【.offsetWidth】〗 和 【.offsetHeight】])， 可 获取 特定 元 素 实 
例 的 尺寸 相关 数据 。 

@ 衔接 【.clientLeft〗、【.clientTop】、【.offsetLeft〗 和 【.offsetTop】〗， 可 获取 特定 元 素 实例 的 坐标 
相关 数据 。 

e@ ”衔接 【.offsetParent]， 可 获取 可 定位 的 上 层 元 素 实例 。 


关于 其 调试 ， 请 参看 如 下 示例 。 
【16-8-^-DOM-coordinates-and-offsetParent.html]】 


<!DOCTYPE html> 
<html> 
<head> 
<title>DOM coordinates and offsetParent</title> 
<style> 
#div01 
{ 
color: Chocolate ; 
text-align: center ; 
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【相关 说 明 】 


div01.clientWidth 会 返回 【在 属性 id 的 数据 为 'div01' 的 div 元 素 实例 中 , 其 客户 区 域 宽度 (client 
width) 】 的 像素 个 数 120。 所 谓 的 客户 区 域 宽度 ， 并 不 包含 滚动 条 scroll bar)、 边 框 (border) 和 
外 边 距 (margin) 的 宽度 ， 但 是 包含 内 边 距 (padding) 的 宽度 。 


div01.offsetWidth 会 返回 【在 属性 id 的 数据 为 div01' 的 div 元 素 实例 中 ， 其 偏 移 宽度 (offset 
width) 】 的 像素 个 数 136。 所 谓 的 偏 移 宽度 ， 是 指 【客户 区 域 宽度 】 加 上 【边框 的 宽度 】。 
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console.log(div01.clientHeight) ; 
div01.clientHeight 会 返回 【在 属性 id 的 数据 为 div01' 的 div 元 素 实例 中 , 其 客户 区 域 高 度 Cclient 
height) 】 的 像素 个 数 80。 所 谓 的 客户 区 域 高 度 ， 并 不 包含 滚动 条 、 边 框 和 外 边 距 的 高 度 ， 但 是 包 
含 内 边 距 (padding) 的 高 度 。 
console.log(div01.offsetHeight) ; 
div01.offsetHeight 会 返回 【在 属性 id 的 数据 为 div01' 的 div 元 素 实 例 中 ， 其 偏 移 高 度 (offset 
height) 】 的 像素 个 数 96。 所 谓 的 偏 移 高 度 ， 是 指 【 客 户 区 域 高 度 】 加 上 【边框 的 高 度 】。 


console.10g('') 


console.log(div01.clientLeft) ; 
div01l.clientLeft 会 返回 【在 属性 id 的 数据 为 'div01' 的 div 元 素 实 例 中 , 其 客户 区 域 的 左上 顶点 】 
的 坐标 x 值 。 在 此 ， 将 上 述 div 元 素 实例 的 边框 外 侧 的 左上 顶点 ， 作 为 坐标 原点 ， 以 评估 出 在 上 述 
div 元 素 实 例 的 客户 区 域 里 ， 其 左上 顶点 的 坐标 x 值 。 
console.log(div01.offsetLeft) ; 
div01.offsetLeft 会 返回 【在 属性 id 的 数据 为 'div01' 的 div 元 素 实例 中 , 其 客户 区 域 的 左上 顶点 】 
的 偏 移 (offset) 坐标 x 值 。 在 此 ， 将 浏览 器 窗口 的 左上 顶点 ， 作 为 坐标 原点 ， 以 评估 出 在 上 述 div 
元 素 实 例 的 边框 外 侧 中 ， 其 左上 顶点 的 偏 移 坐 标 x 值 。 


console.10g('') ; 


console.log(div0l.clientTop) ; 
div01.clientTop 会 返回 【在 属性 id 的 数据 为 'div01' 的 div 元 素 实例 中 , 其 客户 区 域 的 左上 顶点 】 
的 坐标 y 值 。 在 此 ， 将 上 述 div 元 素 实例 的 边框 外 侧 的 左上 顶点 ， 作 为 坐标 原点 ， 以 评估 出 在 上 述 
div 元 素 实 例 的 客户 区 域 里 ， 其 左上 顶点 的 坐标 y 值 。 
console.log(div01.offsetTop) ; 
div01.offsetTop 会 返回 【在 属性 id 的 数据 为 'div01' 的 div 元 素 实 例 中 , 其 客户 区 域 的 左上 顶点 】 
的 偏 移 坐 标 y 值 。 在 此 ， 将 浏览 器 窗口 的 左上 顶点 ， 作 为 坐标 原点 ， 以 评估 出 在 上 述 div 元 素 实例 
的 边框 外 侧 中 ， 其 左上 顶点 的 偏 移 坐 标 y 值 。 


console.10g('') ; 


// console.log(div01.parentElement.tagName) ; 
console.log(div01.offsetParent .tagName) ; 


div01.offsetParent.tagName 与 div01.parentElement.tagName 有 着 相同 的 效果 ， 均 会 返回 【在 属 
性 id 的 数据 为 'div01' 的 div 元 素 实 例 的 上 层 元 素 实例 中 ,其 代表 元 素 名 称 / 标签 名 称 (tag name) 】 
的 字符 串 'BODY'。 

对 于 当前 元 素 实例 的 父 元 素 实例 而 言 ， 若 其 style.display 的 数据 为 字符 串 'static， 则 其 属性 
parentElement 并 不 是 返回 当前 元 素 实例 的 父 元 素 实例 ， 而 是 返回 【其 style.display 的 数据 ， 并 非 字 
符 串 'static'】 的 更 上 层 的 元 素 实 例 。 


div01.offsetParent.style.backgroundColor = 'YellowGreen' ; 
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此 语句 间接 设置 了 body 元 素 实例 的 背景 颜色 ， 成 为 黄 绿色 (yellow green) 。 


16.9 ”比较 两 个 元 素 之 间 的 位 置 关系 


通过 【其 数据 为 特定 元 素 实例 的 变量 名 称 】 衔 接 函 数 【.compareDocumentPosition( 数 据 为 另 一 
元 素 实例 的 变量 名 称 )】 的 调用 ， 可 在 当前 网 页 及 其 iframe 元 素 实例 中 的 子 网 页 里 ， 比 较 两 个 特定 
元 素 实 例 之 间 的 位 置 关系 。 请 参看 如 下 带 有 两 个 源 代 码 文档 的 示例 。 请 留意 , 本 示例 的 源 代 码 文档 ， 
必须 通过 HTTP 协议 ， 才 能 调试 出 其 正确 的 结果 。 


【16-9-^-DOM-compareDocumentPosition.html】 


<!DOCTYPE html> 
<html> 
<head> 
<title>DOM compareDocumentPosition()</title> 
<style> 
div 
{ 
color: DodgerBlue ; 
background-color: Pink ; 
width: 50px ; 
height: S50px ; 
padding: Spx ; 
text-align: center ; 
margin: 5px auto ; 
display: inline-block ; 
} 
</style> 
</head> 
<body align="center"> 
<iframe id="iframe01" src="16-9-^-test-page.html" width="100%" height="70" style="border: 
none"></iframe> 


<div idq="div01">1st</div> 

<div id="div02">2nd</div> 

<div id="div03">3rd</div> 

<div id="div04">4th</div> 

<div id="div05">5th</div> 
</body> 
<script> 

let result = false, ref = null ; 


result = div01.compareDocumentPosition (div03) ; 


console.log(result) ; 
console.10g('') 


result = div03.compareDocumentPosition (div01) ; 


console.log(result) ; 
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console.10og('') ; 


ZX 
document .onreadystatechange = function (event) 


{ 
Switch (document .readyState) 
{ 
case 'complete': 
ref = iframe01.contentDocument .getElementById('span01') ; 


result = div01.compareDocumentPosition(ref) ; 


console.log(result) ; 
break ; 
} 
A 
</script> 
</html> 


【相关 说 明 】 
<script> 
let result = false, ref = null ; 
此 语句 声明 了 初始 数据 为 布尔 值 false 的 变量 result， 以 及 初始 数据 为 空 值 Cnull) 的 变量 ref。 
result = div01.compareDocumentPosition(div03) ; 
div01.compareDocumentPosition(div03) 当 前 返回 整数 值 4, 意味 着 属性 id 的 数据 为 div03' 的 div 
元 素 实 例 ， 存 在 于 属性 id 的 数据 为 'div01' 的 div 元 素 实例 的 后 方 。 


通过 【元 素 实例 1 的 id】 衔 接 函 数 【.compareDocumentPosition( 元 素 实 例 2 的 id 字符 串 )】 的 
调用 ， 可 返回 如 下 各 整数 值 的 组 合 : 
1: 意味 着 两 个 元 素 实例 ， 不 在 相同 的 网 页 文档 里 。 
2: 意味 着 元 素 实例 2， 是 在 元 素 实例 1 的 前 方 。 
4: 意味 着 元 素 实例 2， 是 在 元 素 实例 1 的 后 方 。 
8: 意味 着 元 素 实例 2， 是 元 素 实例 1 的 上 层 (祖先 ) 元 素 实例 。 
16: 意味 着 元 素 实例 2， 是 元 素 实 例 1 的 内 层 (后 代 ) 元素 实 例 。 
32: 意味 着 两 个 元 素 实例 之 间 的 关系 ， 是 被 动态 实现 的 。 


console.log(result) ; 
显示 出 整数 值 4 的 信息 。 
console.10g('') ; 


result = div03.compareDocumentPosition (div01) ; 
div03.compareDocumentPosition(div01) 当 前 返回 整数 值 2, 意味 着 属性 id 的 数据 为 'div01' 的 div 
元 素 实例 ， 存 在 于 属性 id 的 数据 为 'div03' 的 div 元 素 实例 的 前 方 。 


console.log(result) ; 
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显示 出 整数 值 2 的 信息 。 
console.10g('') 
document .onreadystatechange = function (event) 
{ 
switch (document .readyState) 


{ 
case "complete' : 


ref = iframe01.contentDocument .getElementById('span01') ; 
在 属性 id 的 数据 为 iframe01' 的 iframe 元 素 实例 的 范围 里 ， 当 前 被 呈现 出 外 部 网 页 
16-9-^-test-page.html 的 内 容 。 在 此 ，iframe01.contentDocument.getElementById('span01') 会 返回 【在 
外 部 网 页 中 ， 其 属性 id 的 数据 为 'span01'】 的 span 元 素 实例 ， 并 赋 给 变量 ref。 


result = div01.compareDocumentPosition(ref) ; 


div01.compareDocumentPosition(ref) 当 前 返回 整数 值 37， 也 就 是 1 + 4 + 32 的 总 和 ， 因 此 同时 
意味 着 以 下 状况 : 

@ 属性 这 的 数据 为 div01 的 div 元 素 实例 ， 和 变量 ref 所 代表 的 属性 id 的 数据 为 'span01' 的 span 
元 素 实例 ， 并 不 存在 于 相同 的 网 页 文档 里 。 

ee 变量 ref 所 代表 的 属性 id 的 数据 为 'span01' 的 span 元 素 实 例 ， 存 在 于 属性 id 的 数据 为 'div01' 
的 div 元 素 实例 的 后 方 。 

@ 属性 id 的 数据 为 div01' 的 div 元 素 实例 ， 和 变量 ref 所 代表 的 属性 id 的 数据 为 'span01' 的 span 
元 素 实 例 之 间 的 关系 ， 是 被 动态 实现 的 。 


console.log(result) ; 
显示 出 整数 值 37 的 信息 。 


break ; 


HE 
上 述 语法 将 等 号 右 侧 的 匿名 函数 的 定义 ， 赋 给 了 代表 网 页 本 身 的 document 对 象 实例 的 属性 
onreadystatechange， 使 得 网 页 当前 的 加 载 状 态 ， 一 旦 有 变化 ， 则 上 述 匿 名 函数 就 会 被 调用 。 
【16-9-^-test-page.html] 


<!DOCTYPE html> 
<html> 
<head> 
<title>test page</title> 
<style> 
span 
{ 
color: LightGreen ; 
background-color: DodgerBlue ; 
width: 40px ; 
height: 30px ; 
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padding: 5px ; 
border-radius: 5px ; 
text-align: center ; 
margin: 5px auto ; 
display: inline-block ; 
} 
</style> 


</head> 
<body align="center"> 


<span id="span01">one</span> 
<span id="span02">two</span> 
<span id="span03">three</span> 
<span id="span04">four</span> 
<span id="span05">five</span> 


</body> 
</html> 


【相关 说 明 】 


<body align="center"> 


<span id="span01">one</span> 
<span id="span02">two</span> 
<span id="span03">three</span> 
<span id="span04">four</span> 
<span id="span05">five</span> 


属性 id 的 数据 分 别 为 'span01' ~ 'span05' 的 这 些 span 元 素 实 例 ， 是 位 于 网 页 文档 
【16-9-^-test-page.html】 里 。 


16.10 “判断 是 否 存在 特定 子 元 素 或 可 被 编辑 


通过 【document.body】 或 【数据 为 特定 元 素 实 例 的 变量 名 称 】 衔 接 函数 【.contains()】 的 调用 ， 
可 用 来 判断 body 元 素 实例 或 者 特定 元 素 实例 ， 是 否 内 含 特定 子 元 素 实例 。 而 通过 【数据 为 特定 元 


素 实例 
四 


变量 名 称 】: 


街 接 【.isContentEditable]， 可 判断 特定 元 素 实 例 ， 是 否 可 被 编辑 (editable)。 
衔接 【.contentEditable】〗， 可 动态 设置 特定 元 素 实例 的 可 被 编辑 的 状态 。 


对 于 相关 的 综合 运用 ， 请 参看 如 下 示例 。 
【16-10-^-DOM-contains-and-isContentEditable.html】 


<!DOCTYPE html> 
<html> 
<head> 


<title>DOM contains () and isContentEditable</title> 
<style> 

div 

{ 
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【相关 说 明 】 


document.body.contains(div01) 当 前 返回 布尔 值 ttue， 意 味 着 在 body 元 素 实例 中 ， 存 在 属性 id 


的 数据 为 'div01' 的 div 元 素 实例 。 


document.body.contains(p01) 当 前 返回 布尔 值 tue， 意 味 着 在 body 元 素 实例 中 ， 存 在 属性 id 的 
数据 为 p01 的 p 元 素 实例 。 
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console.log(aiv01.contains(a01)) ; 
div01.contains(a01) 当 前 返回 布尔 值 tue， 意 味 着 在 属性 id 的 数据 为 'div01' 的 div 元 素 实例 中 ， 
存在 属性 id 的 数据 为 'a01' 的 a 元 素 实例 。 


console.10g('') 


console.log(p01.contains (a01)) ; 
p01.contains(a01) 当 前 返回 布尔 值 false， 意 味 着 在 属性 id 的 数据 为 'p01' 的 p 元素 实例 中 ， 并 不 
存在 属性 id 的 数据 为 'a01' 的 a 元 素 实例 。 


console.10g('') 


console.log(p01.isContentEditable) ; 
属性 p01 的 p 元 素 实 例 ， 默 认为 不 可 直接 在 网 页 上 ， 被 编辑 的 元 素 实例 ; 所 以 
p01.isContentEditable 的 默认 值 为 布尔 值 false。 
P01.contentEditable = true ; 
此 语句 将 布尔 值 rue， 赋 给 了 属性 id 的 数据 为 p01 的 p 元 素 实例 的 属性 contentEditable， 使 得 
上 述 p 元 素 实例 被 开放 了 【在 网 页 上 的 其 范围 内 ， 用 户 可 直接 进行 编辑 】 的 功能 。 换 言 之 ， 读 者 可 
在 此 示例 网 页 中 ， 单 击 p 元 素 实例 内 的 文本 Super; 待 键盘 光标 出 现 之 后 ， 将 原始 文本 ， 修 改 成 为 
新 的 文本 。 


16.11 访问 特定 元 素 实 例 的 文本 被 书写 的 方向 


通过 【数据 为 特定 元 素 实例 的 变量 名 称 】 衔 接 【.dir】， 可 获取 或 设置 特定 元 素 实例 上 的 文本 
被 书写 的 方向 〈direction) 。 请 参看 如 下 示例 。 
【16-11-^-DOM-dir.html) 


<!DOCTYPE html> 
<htm1> 
<head> 
<title>DOM dir</title> 
<style> 
#p01 
color: RoyalBlue ; 
background-color: Gold ; 
} 
</style> 
</head> 
<body> 
<p id="p01"> 
To live happily ever after... 
</p> 
</body> 
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<script> 
// p01.style.direction = 'rtl' ; 
pOl.dir = 'rtl' ; 
</script> 
</html> 


【相关 说 明 】 
<script> 


// p01.style.direction = 'rtl' ; 
pol.dir = 'rtl' ; 


此 语句 将 字符 串 tl', 赋 给 了 属性 id 的 数据 为 p01' 的 p 元 素 实例 的 属性 dir, 使 得 上 述 p 元 素 实 
例 上 的 文本 ， 变 更 了 显示 的 方向 ， 成 为 【从 右 至 左 (RTL, right to lefD】。 实 际 上 ， 其 效果 看 起 来 
相似 于 靠 右 侧 对 齐 而 已 。 


16.12 ”返回 头 尾 的 子 节点 实例 或 子 元 素 实 例 


通过 【数据 为 特定 元 素 实例 的 变量 名 称 】: 

衔接 【.firstChild〗， 可 返回 特定 元 素 实例 的 第 1 个 子 节点 实例 。 

衔接 【.firstElementChildj， 可 返回 特定 元 素 实例 的 第 1 个 子 元 素 实例 。 
衔接 【.lastChild〗， 可 返回 特定 元 素 实 例 的 最 后 1 个 子 节点 实例 。 


. 
四 
. 
@ 衔接 【.lastElementChild]， 可 返回 特定 元 素 实例 的 最 后 1 个 子 元 素 实 例 。 


对 于 相关 的 综合 调试 ， 请 参看 如 下 示例 。 
【16-12-^-DOM-firstand-last-children.html]】 


<!DOCTYPE html> 
<html> 
<head> 
<title>DOM first and last children</title> 
</head> 
<body> 


Inventory 

<div id="div01"> 
Fruits 
<p>apple</p> 
<p>banana</p> 
<p>cherry</p> 

</div> 


<div id="div02"> 
Vegetables 
<p>burdock</p> 
<p>cabbage</p> 
<p>spinach</p> 
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【相关 说 明 】 


document.body.firstChild 在 此 会 返回 body 元 素 实 例 内 的 第 1 个 子 节点 实例 。 其 中 ， 节 点 实例 
可 分 为 元 素 实例 、 属 性 节点 实例 与 文本 节点 实例 。 在 此 ， 其 第 1 个 子 节点 实例 ， 是 如 下 横 跨 多 行 
的 文本 节点 实例 : 


Inventory 


document.body.firstElementChild 当前 会 返回 body 元 素 实例 中 的 第 1 个 子 元 素 实例 【<div 
id="div01">...</div>】 。 


div01.firstChild 会 返回 属性 id 的 数据 为 'div01' 的 div 元 素 实例 中 的 第 1 个 子 节点 实例 ， 也 就 是 
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如 下 横 跨 多 行 的 文本 节点 实例 : 


Fruits 


console.log(div01.firstElementChild) ; 


div01.firstElementChild 会 返回 属性 id 的 数据 为 div01' 的 div 元 素 实例 中 的 第 1 个 子 元 素 实例 
【<p>apple</p>】。 


console.1og('') ; 


console.log(div01.1astChild) ; 
div01.lastChild 会 返回 属性 id 的 数据 为 div01' 的 div 元 素 实 例 中 的 最 后 1 个 子 节点 实例 。 此 语 
句 会 显示 出 可 展开 的 【#text】 的 信息 。 
console.log(div01.1astElementChild) ; 
div01.lastElementChild 会 返回 属性 id 的 数据 为 'div01' 的 div 元 素 实例 中 的 最 后 1 个 子 元 素 实例 
【<p>cherry</p>】。 


console.1og('') ; 


console.log(div02.firstchild) ; 
div02.firstChild 会 返回 属性 id 的 数据 为 div02' 的 div 元 素 实例 中 的 第 1 个 子 节点 实例 ， 也 就 是 
如 下 横 跨 多 行 的 文本 节点 实例 : 


Vegetables 


console.log(div02.firstElementChild) ; 


div02.firstElementChild 会 返回 属性 id 的 数据 为 'div02' 的 div 元 素 实例 中 的 第 1 个 子 元 素 实例 
【<p>burdock</p>】。 


console.1og('') ; 


console.log(div02.lastChild) ; 
div02.lastChild 会 返回 属性 id 的 数据 为 'div02' 的 div 元 素 实例 中 的 最 后 1 个 子 节点 实例 。 此 语 
句 会 显示 出 可 展开 的 【#text】 的 信息 。 
console.log(div02.1astElementChild) ; 


div02.lastElementChild 会 返回 属性 id 的 数据 为 'div02' 的 div 元 素 实例 中 的 最 后 1 个 子 元 素 实例 
【<p>spinach</p>】。 
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16.13 ”访问 或 删除 特定 元 素 实 例 的 特定 属性 


通过 【数据 为 特定 元 素 实例 的 变量 名 称 】: 
® ”衔接 函数 【.getAttribute()】 的 调用 ， 可 获取 特定 元 素 实例 的 特定 属性 的 数据 。 
”衔接 函数 【.getAttributeNode()】 的 调用 ， 可 获取 特定 元 素 实 例 的 特定 属性 对 应 的 属性 节点 实 


®@ ” 街 接 函数 【.setAttribute0】 的 调用 ， 可 设置 特定 元 素 实例 的 特定 属性 的 数据 。 
® ”衔接 函数 【.setAttributeNode(】〗 的 调用 ， 可 设置 特定 元 素 实 例 的 特定 属性 对 应 的 属性 节点 实 


”衔接 函数 【.removeAttribute()】 的 调用 ， 可 删除 特定 元 素 实例 的 特定 属性 。 
@ 衔接 函数 【.removeAttributeNode(】 的 调用 ， 可 删除 特定 元 素 实 例 的 特定 属性 对 应 的 属性 节 
点 实例 。 


对 于 相关 的 综合 调试 ， 请 参看 如 下 示例 。 
【16-13-^-DOM-attribute-access-or-deletion.html】 


<!DOCTYPE html> 
<html> 
<head> 
<title>DOM attributeaccess or deletion</title> 
</head> 
<body> 
<div id="div01" style="color: RoyalBlue ; background-color: Gold"> 
Time is money ... 
</div> 
</body> 
<script> 
console.log(div01.getRAttribute('id')) ; 
console.log(div01.getAttributeNode('id')) ; 
console.1log('') ; 


let a node = div01.getAttributeNode('id') ; 
console.log(a_node .name) ; 
console.log(a node.value) ; 


console.1og('') ; 


Ph 
a_node = document.createAttribute('title') ; 


a_node.value = 'Author: Francesco' ; 
div01.setRAttributeNode (a node) ; 


console.log(div01.title) ; 
console.10og('') ; 


MAA 
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div01.setAttribute('align', center') ; 


console.log(div01.align) ; 
console.10g('') ; 


/1/1 
div01.removeAttribute('title') ; 


console.log(div01.title) ; 
console.10g('') ; 


WAh 
a node = div01.getRttributeNode('align') ; 


div01.removeRAttributeNode (a node) ; 


console.log(div01.align) ; 
console.log('') ; 
</script> 
</html> 


【相关 说 明 】 


<script> 


console.log(div01.getRAttribute('id')) ; 
div01.getAttribute(id) 会 返回 【在 属性 id 的 数据 为 div01' 的 div 元 素 实例 中 ,其 属性 id]】 的 数据 
字符 串 'div01'。 


console.log(div01l.getAttributeNode('id')) ; 


此 语句 会 显示 出 【id="div01"】 的 信息 。 其 中 ，div01.getAttributeNode('id) 会 返 
的 数据 为 'div01' 的 div 元 素 实例 中 ， 其 属性 id】 对 应 的 属性 节点 实例 。 


console.1og('') ; 


【在 属性 id 


let a node = div01.getRAttributeNode('id') ; 
此 语句 声明 了 变量 a_ node， 其 初始 数据 为 div01.getAttributeNode("id") 所 返回 的 属性 id 对 应 的 
属性 节点 实例 。 
console.log(a_node.name) ; 
a_node.name 当前 返回 字符 串 'id'， 意 味 着 此 属性 节点 实例 的 名 称 为 id。 
console.log(a_node.value) ; 
a_node.value 当前 返回 字符 串 'div01， 意 味 着 此 属性 节点 实例 的 值 (value) 为 div01。 


console.10g('') ; 


a_node = document.createAttribute('title') ; 


此 语句 将 document.createAttribute(title) 所 返回 的 属性 title 对 应 的 属性 节点 实例 ， 赋 给 了 变量 


a_node。 
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a_node.value = "Ruthor: Francesco' ; 
语句 将 字符 串 'Author: Francesco'， 赋 给 了 变量 a_node.value， 使 得 变量 a_node 所 代表 的 属性 
节点 实例 的 值 , 成 为 了 【Author: Francesco】, 进而 等 价 于 HTML 语法 【title="Author: Francesco"】。 
div01.setRttributeNode (a_node) ; 
语句 将 变量 a_node 所 代表 的 属性 title 对 应 的 属性 节点 实例 , 设置 成 为 属性 id 的 数据 是 'div01' 
的 div 元 素 实例 中 的 属性 title。 
console.log(div01.title) ; 
div0l.title 在 此 返回 了 字符 串 'Author: Francesco'。 


console.1o0g('') 


divO1.setAttribute ('align', 'center') ; 

此 语句 设置 了 属性 id 的 数据 为 div01' 的 div 元 素 实例 中 的 属性 align 及 其 数据 字符 串 'center'， 
进而 等 价 于 HTML 语法 【align="center"】。 

console.log(div01.align) ; 

div01.align 在 此 返回 了 字符 串 'center 。 


console.1og('') ; 


div0l.removeAttribute('title') »; 
语句 删除 了 属性 id 的 数据 为 'div01' 的 div 元 素 实例 中 的 属性 title 及 其 数据 。 
console.log(div01.title) ; 
div01.title 在 此 返回 空 字符 串 "， 意 味 着 其 属性 title 已 经 被 删除 了 。 
console.1og('') ; 
a_node = div01.getRttributeNode("align') ; 


此 语句 在 属性 id 的 数据 为 'div01' 的 div 元 素 实例 中 ， 将 属性 align 对 应 的 属性 节点 实例 ， 赋 给 
了 变量 a_node。 


div01.removeRAttributeNode (a node) ; 
此 语句 删除 了 属性 id 的 数据 为 'div01' 的 div 元 素 实例 中 的 属性 align 及 其 数据 。 
console.log(div01l.align) ; 


div01.align 在 此 返回 空 字 符 串 "， 意 味 着 属性 align 已 经 被 被 删除 了 。 


16.14 访问 特定 元 素 实 例 的 常见 属性 的 数据 


通过 【数据 为 特定 元 素 实例 的 变量 名 称 】: 
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e ”衔接 【.id】, 可 访问 特定 元 素 实例 的 属性 id 的 数据 , 并 代表 其 身份 识别 码 (identification code )。 

。 衔接 [.innerHTML 可 访问 特定 元 素 实 例 的 属性 innerHTML 的 数据 , 也 就 是 在 其 内 部 (inner ) 
带 有 所 有 子 节点 实例 的 HTML 源 代码 片段 。 

”衔接 [ .tagName】 可 获取 特定 元 素 实例 的 属性 tagName 的 数据 ,并 代表 其 标签 名 称 ( tag name )。 

e 衔接 【ititlel 可 访问 特定 元 素 实例 的 属性 title 的 数据 ,并 代表 【在 鼠标 指针 移入 其 范围 内 时 ， 
所 呈现 】 的 提示 文本 。 

日 衔接 【.stylej， 可 访问 特定 元 素 实例 的 各 项 外 观 相关 的 CSS 属性 。 


对 于 相关 的 综合 调试 ， 请 参看 如 下 示例 。 
【16-14-^-DOM-common-attributes.html] 
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box03 .innerHTML = '3rd area' }; 
box03.style.backgroundColor = 'Gold' ; 
box03.style.textDecoration = 'underline' ; 


let nodes = document .getElementsByTagName('div') ; 


log (nodes.length) ; 


} 
</script> 
</html> 


【相关 说 明 】 


<script> 
with (console) 
{ 


log (box01.id) ; 
【在 属性 id 的 数据 为 'box01' 的 div 元 素 实 例 中 ,其 属性 id] 的 数据 字符 串 'box01'。 
log (box01.innerHTML) ; 


box01.innerHTML 会 返回 【在 属性 id 的 数据 为 box01' 的 div 元 素 实例 中 】 的 如 下 内 容 文 本 : 


box01.id 会 返 [ 


Area one 


log (box01.tagName) ; 
box01.tagName 在 此 会 返回 【在 属性 id 的 数据 为 'box01' 的 div 元 素 实例 中 '， 其 元 素 名 称 / 标 
签名 称 〈tag name) 】 对 应 的 字符 串 'DIV'。 


log('') ; 


box02.title = 'This area is optional.' ; 
此 语句 将 字符 串 'This area is optional.， 赋 给 了 属性 id 的 数据 为 "box02' 的 div 元 素 实例 中 的 属性 
title， 使 得 鼠标 指针 移入 上 述 div 元 素 实 例 之 后 ， 呈 现 出 提示 信息 【This area is optional.】。 


// box03 .textContent = '3rd area' ; 
box03 .innerHTML = '3rd area' ; 


语句 将 字符 串 3rd area', 赋 给 了 属性 id 的 数据 为 box03' 的 div 元 素 实例 中 的 属性 innerHTML， 
使 得 其 内 容 文本 【3rd area】， 呈 现在 上 述 div 元 素 实例 的 范围 内 。 


box03.style.backgroundColor = "Gold' ; 


此 语句 将 字符 串 'Gold ， 赋 给 了 属性 id 的 数据 为 "box03' 的 div 元 素 实例 中 的 子 属性 
style.backgroundColor， 使 得 上 述 div 元 素 实 例 ， 呈 现 出 金色 〈gold) 的 背景 颜色 。 
box03.style.textDecoration = "underline' ; 
此 语句 将 字符 串 "underline ， 赋 给 了 属性 id 的 数据 为 "box03' 的 div 元 素 实例 中 的 子 属性 
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style.textDecoration, 使 得 上 述 div 元 素 实 例 , 呈现 出 下 画 线 Cunderline ) 的 文本 装饰 (text decoration)。 
let nodes = document .getElementsByTagName('aiv') ; 
此 语句 声明 了 变量 nodes， 其 初始 数据 为 document.getElementsByTagName('div') 所 返 
div 元 素 实例 构成 的 集合 。 
log (nodes.1length) ; 


nodes.length 在 此 返回 整数 值 3， 意 味 着 在 变量 nodes 所 代表 的 集合 中 ， 存 在 3 个 元 素 实例 。 


五 


的 3 个 


16.15 “判断 是 否 存在 任何 子 节 点 实例 


通过 【数据 为 特定 元 素 实例 的 变量 名 称 】 衔 接 函 数 【.hasChildNodes()】 的 调用 ， 可 判断 在 特 
定 元 素 实例 中 ， 是 否 存在 任何 子 节点 (child node) 实例 。 请 参看 如 下 示例 。 


【16-15-^-DOM-hasChildNodes.html] 


<!DOCTYPE html> 
<html> 
<head> 
<title>DOM hasChildNodes ()</title> 
</head> 
<body> 
<select id="list01"> 
<option>item 1</option> 
<option>item 2</option> 
<option>item 3</option> 
</select> 


<ul id="list02"> 
<li>item 1</1i> 
<li>item 2</1i> 
<li>item 3</1i> 
</ul> 


<div id="1ist03"> 
<p id="p01">paragraph 1</p> 
<p id="p02">paragraph 2</p> 
<p id="p03">paragraph 3</p> 
<p id="p04"></p> 
<p id="p05"></p> 
</div> 
</body> 
<script> 
with (console) 
{ 
log (list01.hasChildNodes()) ; 
log (list02.hasChildNodes()) ; 
log (list03.hasChildNodes()) ; 
log('') ; 
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lo0g (p01.haschildNo 
10g (p04.haschildNo 
10g (p05.haschildNo 
} 
</script> 
</html> 


【相关 说 明 】 


<script> 
with (console) 
{ 


log (list01.hasChil 


list01.hasChildNodes0 返 


des()) ; 
des()) ; 
des()) ; 


GNodes()) ; 


存在 任意 子 节点 实例 。 其 中 ， 
log (list02.hasChil 
list02.hasChildNodes0) 返 
任意 子 节点 实例 。 
log(list03.haschil 
list03.hasChildNodes() 返 
任意 子 节点 实例 。 
log('') ; 


log (p01.hasChildNo 


p01.hasChildNodes() 返 回 布 尔 值 rue， 代 表 在 


子 节点 实例 。 


lo0g (p04.hasCchildNo 


p04.hasChildNodes() 返 回 布 尔 值 ttue， 代 表 在 


节点 实例 可 分 为 元 素 实例 、 


dNodes()) ; 


dNodes()) ; 


des()) ; 


des()) ; 


属性 id 的 数据 为 'p01' 的 


属性 id 的 数据 为 p04" 抽 


回 布尔 值 rue， 意 味 着 在 属性 id 的 数据 为 list01' 的 select 元 素 实例 中 ， 
属性 节点 实例 和 文本 节点 实例 。 


回 布尔 值 true， 代 表 在 属性 id 的 数据 为 list02' 的 ul 元 素 实例 中 ， 存 在 


回 布尔 值 rue， 代 表 在 属性 id 的 数据 为 'list03' 的 div 元 素 实例 中 ,存在 


p 元 素 实例 中 ， 存 在 任意 


p 元 素 实例 中 ， 存 在 任意 


子 节点 实例 。 请 留意 ， 在 属性 id 的 数据 为 'p04' 的 p 元 素 实例 中 ， 其 内 含 的 仅仅 1 个 空格 字符 ， 仍 


然 被 视 为 1 个 文本 节点 实例 。 


10g (p05.haschildNo: 


p05.hasChildNodes() 返 回 布尔 值 false, 代表 在 


任何 子 节点 实例 。 


16.16 


des()) ; 


属性 id 的 数据 为 'p05' 的 p 元 素 实例 中 ,并 不 存在 


在 特定 子 节点 实例 之 前 新 增 男 一 子 节点 实例 


通过 【数据 为 特定 元 素 实 例 的 变量 名 称 】 衔 接 函 数 【.insertBefore()】 的 调用 ， 可 在 特定 元 素 实 
例 中 的 特定 子 节点 实例 之 前 ， 新 增 子 节点 实例 。 请 参看 如 下 示例 。 
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【16-16-^-DOM-insertBefore.html] 


【相关 说 明 】 


此 语句 声明 了 变量 ref， 其 初始 数据 为 document.createElement('p") 所 返回 的 新 的 p 元素 实例 。 
refinmnerHML = '1st inserted. 1 

此 语句 将 字符 串 '1st inserted.'， 赋 给 了 变量 ref 所 代表 的 p 元 素 实例 的 属性 innerHTML, 使 得 p 
元 素 实例 ， 在 网 页 上 呈现 出 【1st inserted】 的 文本 。 
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语句 将 字符 串 尽 oyalBlue'， 赋 给 了 变量 ref 所 代表 的 p 元 素 实 例 的 属性 style.color, 使 得 p 元 
素 实例 ， 在 网 页 上 呈现 出 宝蓝 色 (royalblue) 的 文本 颜色 。 
content .appendchild (ref) ; 
将 变量 ref 所 代表 的 p 元 素 实例 ， 新 增 至 属性 id 的 数据 为 'content 的 div 元 素 实例 内 的 末尾 。 
ref = document.createElement ('p') ; 
语句 将 document.createElement('p') 所 返回 的 另 一 个 新 的 p 元 素 实例 ， 赋 给 了 变量 ref。 
ref.innerHTML = '2nd inserted..' ; 
此 语句 将 字符 串 '2nd inserted.."， 赋 给 了 变量 ref 所 代表 的 p 元 素 实例 的 属性 innerHTML， 使 得 
Pp 元 素 实 例 ， 在 网 页 上 呈现 出 【2nd inserted..】 的 文本 。 
ref.style.color = 'Purple' ; 
此 语句 将 字符 串 Purple'， 赋 给 了 变量 ref 所 代表 的 p 元 素 实例 的 属性 style.color， 使 得 p 元 素 
实例 ， 在 网 页 上 呈现 出 紫色 (purple〉 的 文本 颜色 。 
content .insertBefore(ref, content.children[0]) ; 
content.children[0] 会 返回 【在 属性 id 的 数据 为 'content' 的 div 元 素 实例 中 ， 其 第 1 个 (索引 值 
为 0)】 子 元 素 实 例 。 所 以 ， 此 语句 在 content.children[0] 所 代表 的 子 元 素 实例 之 前 ， 插 入 了 变量 ref 
所 代表 的 p 元 素 实例 。 


ref = document.createElement ('p') 


将 document.createElement(p) 所 返回 的 新 的 p 元 素 实例 ， 赋 给 变量 ref。 

ref.innerHTML = '3rd inserted...' ; 

此 语句 将 字符 串 '3rd inserted."， 赋 给 了 变量 ref 所 代表 的 p 元 素 实例 的 属性 innerHTML， 使 得 
p 元 素 实 例 ， 在 网 页 上 呈现 出 【3rd inserted..】 的 文本 。 
ref.style.color = 'GreenYellow' ; 

此 语句 将 字符 串 'GreenYellow'， 赋 给 了 变量 ref 所 代表 的 p 元 素 实例 的 属性 style.color， 使 得 p 
元 素 实例 ， 在 网 页 上 呈现 出 绿 黄色 (green yellow) 的 文本 颜色 。 

content .insertBefore(ref, seperator) ; 

此 语句 在 属性 id 的 数据 为 'content' 的 div 元 素 实例 中 , 其 属性 id 的 数据 为 'seperator 的 子 元 素 实 
例 之 前 ， 插 入 了 变量 ref 所 代表 的 p 元 素 实 例 。 


16.17 “判断 两 个 节点 实例 的 内 容 是 否 完全 相同 


通过 【数据 为 特定 元 素 实例 的 变量 名 称 】: 
@ ”衔接 函数 【.isEqualNode(0]】 的 调用 ， 可 判断 2 个 特定 变量 的 数据 ， 是 否 指向 同一 个 内 存 引 址 
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的 节点 实例 。 
。 衔接 函数 【.isSameNode()】〗 的 调用 ， 可 判断 2 个 特定 变量 的 数据 所 指向 的 节点 实例 内 容 ， 是 
否 完全 相同 。 


对 于 相关 的 综合 调试 ， 请 参看 如 下 示例 。 
【16-17-^-DOM-isEqualNode-and-isSameNode.html】 


【相关 说 明 】 
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此 语句 声明 变量 nodes， 其 初始 数据 为 body 元 素 实例 中 的 所 有 子 元 素 实例 构成 的 集合 。 
console.log(nodes[0] .isEqualNode (nodes[1])) ; 


nodes[0] 会 返回 【在 变量 nodes 的 集合 中 的 第 1 个 (索引 值 为 0， 】 子 元 素 实例 ， 也 就 是 body 
元 素 实例 中 的 第 1 个 子 元 素 实例 。 nodes[1] 会 返回 【在 变量 nodes 的 集合 中 的 第 2 个 (索引 值 为 1) 】 
子 元 素 实例 ， 也 就 是 body 元 素 实例 中 的 第 2 个 子 元 素 实例 。 

在 此 ，nodes[0].isEqualNode(nodes[1]) 会 返回 布尔 值 f@lse， 意 味 着 【在 变量 nodes 的 集合 中 ， 
其 第 1 个 (索引 值 为 0 和 第 2 个 (索引 值 为 1) 】 子 元 素 实例 的 内 容 ， 存 在 着 不 同 之 处 。 

console.log(nodes[0].isEqualNode (nodes[2])) ; 

nodes[0] 会 返回 【在 变量 nodes 的 集合 中 的 第 1 个 〈 索 引 值 为 0) 】 子 元 素 实例 ， 也 就 是 body 
元 素 实例 中 的 第 1 个 子 元 素 实例 。 nodes[2] 会 返回 【在 变量 nodes 的 集合 中 的 第 3 个 (索引 值 为 2) 】 
子 元 素 实 例 ， 也 就 是 body 元 素 实例 中 的 第 3 个 子 元 素 实例 。 

nodes[0].isEqualNode(nodes[2]) 返回 布尔 值 true, 意味 着 【在 变量 nodes 的 集合 中 , 第 1 个 ( 索 
引 值 为 0) 和 第 3 个 〈 索 引 值 为 2) 】 子 元 素 实例 的 内 容 ， 是 完全 相同 的 。 

所 谓 的 完全 相同 ， 是 指 【 从 两 个 元 素 实例 的 起 始 语 句 的 位 置 开始 ， 连 细微 的 1 个 文字 ， 甚 至 1 
个 空格 (space) 字符 的 相对 位 置 】， 都 是 没有 差别 的 。 


console.1og('') ; 


console.log(nodes[0].isSameNode (nodes[1])) ; 
nodes[0].isSameNode(nodes[1]) 返 回 布尔 值 false, 意味 着 【在 变量 nodes 的 集合 中 , 第 1 个 〈 索 
引 值 为 0) 和 第 2 个 (索引 值 为 1) 】 子 元 素 实例 ， 并 不 是 相同 的 元 素 实例 ， 也 就 是 各 自 占用 不 同 
的 内 存 引 址 。 其 实 ， 语 法 【nodes[0].isSameNode(nodes[1])】 等 价 于 语法 【nodes[0] == nodes[1]】。 


console.log(nodes[0].isSameNode (nodes[2])) ; 
nodes[0].isSameNode(nodes[2]) 也 会 返回 布尔 值 false， 意味 着 【在 变量 nodes 的 集合 中 的 第 1 
个 (索引 值 为 0， 和 第 3 个 (索引 值 为 2，】 子 元 素 实例 ， 亦 不 是 相同 的 元 素 实 例 ， 也 就 是 各 自 占 
用 不 同 的 内 存 引 址 ,在 此 ,语法 【nodes[0].isSameNode(nodes[2])】 等 价 于 语法 [nodes[0] == nodes[2]】。 


console.10g('') ; 


let p_nodes = document .querySelectorAll('p') ; 
此 语句 声明 了 变量 p_nodes， 其 初始 数据 为 document.querySelectorAll(p) 返 回 的 多 个 p 元 素 实 
例 构成 的 集合 。 
console.log(nodes[0] .isSameNode(P nodes[0])) ; 


console.log(nodes[1].isSameNode(p nodes[1])) ; 
console.log(nodes[2] .isSameNode(p nodes[2])) ; 


这 3 个 语句 均 显 示 出 布尔 值 tue 的 信息 ， 意 味 着 如 下 个 别 的 组 合 ， 均 被 视 为 同一 个 元 素 实例 ， 
也 就 是 指向 相同 的 内 存 引 址 : 

@ nodes[0] 和 p_nodes[0] 的 数据 。 

@ nodes[1] 和 p_nodes[1] 的 数据 。 
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@ nodes[2] 和 p_nodes[2] 的 数据 。 


此 外 在 本 示例 中 , 语法 【nodes[ 索 引 值 n].isSameNode(p_nodes[ 索 引 值 n])] 等 价 卫 


各 法 【nodes[ 索 


引 值 n] 一 p_nodes[ 索 引 值 0]】。 


16.18 ”返回 下 一 个 或 上 一 个 兄弟 节点 实例 


通过 【数据 为 特定 元 素 实例 的 变量 名 称 】: 
e 衔接 【.nextSibling】 可 返回 特定 元 素 实例 的 下 一 个 兄弟 (next sibling ) 节点 实例 。 
@ ”衔接 【.previousSibling】])， 可 返回 特定 元 素 实例 的 上 一 个 兄弟 (previous sibling ) 节点 实例 。 


对 于 相关 的 调试 ， 请 参看 如 下 示例 。 
【16-18-^-DOM-next-and-previous-siblings.html】 


<!DOCTYPE html> 


<html> 
<head> 


<title>DOM next and previous siblings</title> 


</head> 
<body> 


<p id="p01">Paragraph 1</p> 
<p id="p02">Paragraph 2</p> 
<p id="p03">Paragraph 3</p> 
<p id="p04">Paragraph 4</p> 
<p id="p05">Paragraph 5</p> 


</body> 
<script> 


console. 
console. 
console. 


console. 
console. 


WAA 


console. 
console. 
console. 


console. 


</script> 
</html> 


log (p01. 
lo0g (p01. 


lo0g("'') 


log (p03. 


Togs") 


1og(p05. 
1og(p05. 


lo0og('') 


log (p03. 


【相关 说 明 】 


<script> 


console. 


log (p01. 


nextSibling) ; 
nextSibling.nextSibling) ; 


nextElementSibling) ; 


PreviousSibling) ; 
previousSibling.previousSibling) ; 


previousElementSibling) ; 


nextSibling) ; 
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p01.nextSibling 会 返回 【 紧 接 在 属性 id 的 数据 为 'p01' 的 p 元 素 实例 】 之 后 的 兄弟 〈sibling) 节 
点 实例 ， 也 就 是 指 紧 接 在 后 的 同一 层 节点 实例 。 紧 接 在 属性 id 的 数据 为 p01 的 p 元 素 实例 之 后 的 
节点 实例 ， 其 实 是 由 【换行 (line feed) 与 数 个 空格 (space) 字符 】 所 构成 的 文本 节点 实例 。 也 因 
此 ， 此 语句 会 显示 出 代表 文本 节点 实例 的 【#text】 的 信息 。 


console.log(p01.nextSibling.nextSibling) ; 


因为 p01.nextSibling.nextSibling 重复 了 两 次 nextSibling， 所 以 会 返回 属性 id 的 数据 为 'p01 的 p 
元 素 实例 之 后 的 第 2 个 节点 实例 【<p id="p02">Paragraph 2</p>】。 


console.1og('') ; 


console.log(p03.nextElementSibling) ; 
p03.nextElementSibling 会 返回 【 紧 接 在 属性 id 的 数据 为 p03' 的 p 元 素 实例 】 之 后 的 兄弟 元 素 
(sibling element) 实例 ， 也 就 是 紧 接 在 后 的 同一 层 元 素 实例 【<p id="p04">Paragraph 4</p>】。 


console.10g('') ; 


console.log (p05.previousSibling) ; 
p05.previousSibling 会 返回 [ 紧 接 在 属性 id 的 数据 为 'p05' 的 p 元 素 实例 这 前 的 兄弟 节点 (sibling 
node) 实例 ， 也 就 是 紧 接 在 前 的 【同一 层 】 节 点 实例 。 紧 接 在 属性 id 的 数据 为 'p05' 的 p 元 素 实 例 
之 前 的 节点 实例 ， 其 实 是 由 【 数 个 空格 (space) 和 1 个 换行 (line feed) 字符 】 所 构成 的 文本 节点 
实例 。 也 因此 ， 此 语句 会 显示 出 代表 文本 节点 实例 的 【#text】 的 信息 。 


console.log(p05.previousSibling.previousSibling) ; 


因为 p05.previousSibling.previousSibling 重复 了 2 次 previousSibling， 所 以 会 返回 属性 id 的 数 
据 为 p05' 的 p 元 素 实例 之 前 的 第 2 个 节点 实例 【<p id="p04">Paragraph 4</p>】。 
console.1og('') ; 


console.log(p03.previousElementSibling) ; 


p03.previousElementSibling 会 返回 【 紧 接 在 属性 id 的 数据 为 p03' 的 p 元 素 实例 】 之 前 的 兄弟 元 
素 实例 ， 也 就 是 紧 接 在 前 的 同一 层 元 素 实例 【<p id="p02">Paragraph 2</p>】。 


16.19 ”返回 特定 节点 实例 的 相关 数据 


通过 【特定 节点 实例 的 变量 名 称 】 衔 接 【.nodeName】、【.nodeType】 和 【.nodeValue】， 可 
分 别 返 回 特定 节点 实例 的 节点 名 称 (node name) 、 节 点 类 型 (node type) 以 及 节点 值 (node value) 
的 数据 字符 串 ， 也 就 是 特定 节点 实例 的 节点 数据 (node data) 。 请 参看 如 下 示例 。 
【16-19-^-DOM-node-data.html]】 


<!DOCTYPE html> 
<html> 
<head> 
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【相关 说 明 】 


此 语句 声明 了 变量 node， 其 初始 数据 为 属性 id 的 数据 为 'div01' 的 div 元 素 实例 。 


node.nodeName 返回 了 字符 串 'DIV'， 代 表 着 变量 node 所 代表 的 节点 实例 的 节点 名 称 (node 


name) 。 


node.nodeType 返回 整数 值 1, 意味 着 在 变量 node 所 代表 的 节点 实例 中 ,其 节点 类 型 (node type) 
是 元 素 (element) 。 


node.nodeValue 返回 null， 意 味 着 在 变量 node 所 代表 的 节点 实例 中 ， 并 不 存在 对 应 的 节点 值 


(node value) 。 
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node = div01.getRttributeNode('id') ; 


此 语句 将 div01.getAttributeNode('id) 所 返回 的 属性 id 的 属性 节点 (attribute node) 实例 ， 赋 给 
了 变量 node。 
console.log(node.nodeName) ; 
node.nodeName 返回 字符 串 'id'， 意 味 着 在 变量 node 当前 代表 的 属性 节点 实例 中 ， 其 节点 名 称 
(node name) 为 id。 


console.log(node.nodeType) ; 
node.nodeType 返回 整数 值 2, 意味 着 在 变量 node 代表 的 节点 实例 中 , 其 节点 类 型 (node type) 
为 属性 (attribute》。 
console.log(node.nodeValue) ; 
node.nodeValue 返回 字符 串 'div01'， 意 味 着 在 变量 node 代表 的 节点 实例 中 ， 其 节点 值 (node 
value) 为 div01。 


console.1og('') ; 


node = document .body.firstChild ; 
此 语句 将 document.body.firstChild 所 返回 的 body 元 素 实例 中 的 第 1 个 子 节点 实例 ， 赋 给 了 变 


量 node。 


console.1og(node .nodeName) ; 
node.nodeName 返回 字符 串 #text， 意 味 着 在 变量 node 当前 代表 的 文本 节点 实例 中 ， 其 节点 名 
称 (node name) 为 #text。 
console.log(node.nodeType) ; 
node.nodeType 返回 整数 值 3, 意味 着 在 变量 node 所 代表 的 节点 实例 中 ,其 节点 类 型 (node type) 
为 文本 (text) 。 
console.log(node.nodeValue) ; 
node.nodeValue 在 此 返回 了 【在 变量 node 所 代表 的 节点 实例 中 ， 其 如 下 横 跨 多 行 的 字符 串 的 


节点 值 (node value) : 


Sample *** 


16.20 ”合并 多 个 相 邻 的 文本 子 节点 实例 


通过 【数据 为 特定 元 素 实例 的 变量 名 称 】 衔 接 函 数 【.normalize()】 的 调用 ， 可 在 特定 元 素 实 
例 中 ， 将 多 个 相 邻 的 文本 text) 子 节点 (child node) 实例 ， 合 并 成 为 单一 文本 子 节 点 实例 。 请 参 
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看 如 下 示例 。 
【16-20-^-DOM-normalizing-text-nodes.html】 


【相关 说 明 】 


此 语句 声明 了 变量 node， 其 初始 数据 为 document.createTextNode('Happily') 所 返回 的 内 含 字符 
串 'Happily 的 文本 节点 实例 。 
aivol.appendchilal(noge); 

此 语句 将 变量 node 当前 所 代表 的 第 1 个 文本 节点 实例 ， 新 增 至 属性 id 的 数据 为 div01' 的 div 
元 素 实 例 中 。 
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node = document.createTextNode ('ever') ; 


量 node。 


div01.appendChild(node) ; 


元 素 实例 中 。 


量 node。 


div01.appendChild(node) ; 


元 素 实 例 中 。 


console.log(div01.childNodes) ; 


语句 将 document.createTextNode('ever") 所 返回 


此 语句 将 document.createTextNode(after) 所 返回 


语句 将 变量 node 当前 所 代表 的 第 2 个 文本 节点 实例 ， 新 增 至 


node = document .createTextNode ('after') ; 


此 语句 将 变量 node 当前 所 代表 的 第 3 个 文本 节点 实例 ， 新 增 至 


的 内 含 字 符 串 'ever' 的 文本 节点 实例 , 赋 给 了 变 


属性 id 的 数据 为 div01' 的 div 


的 内 含 字符 串 'after' 的 文本 节点 实例 , 赋 给 了 变 


属性 id 的 数据 为 div01' 的 div 


div01.childNodes 返回 【在 属性 id 的 数据 为 'div01' 的 div 元 素 实 例 中 ， 其 所 有 子 节点 实例 】 构 
成 的 集合 。 此 语句 显示 出 【NodeList(3) [text, text, text]】 的 信息 ， 意 味 着 其 所 有 子 节点 实例 ， 均 为 


文本 (text) 节点 实例 。 
console.log(div01.childNodes.length) ; 
div01.childNodes.length 返回 整数 值 3， 意 味 
个 子 节点 实例 。 


console.log(div01.childNodes[0]) ; 


着 属性 id 的 数据 为 'div01' 的 div 元 素 实例 ， 内 含 3 


div01.childNodes[0] 会 返回 【属性 id 的 数据 为 'div01' 的 div 元 素 实例 中 的 第 1 个 (索引 值 为 0) 】 


子 节点 实例 。 此 语句 显示 出 其 第 1 个 子 节点 实例 


console.log(div01.childNodes[1]) ; 


的 文本 "Happily "。 


div01.childNodes[1] 会 返回 【属性 id 的 数据 为 'div0l' 的 div 元 素 实 例 中 的 第 2 个 (索引 值 为 1) 】 


子 节点 实例 。 此 语句 显示 出 其 第 2 个 子 节点 实例 


console.log(div01.childNodes[2]) ; 


的 文本 "ever "。 


div01.childNodes[2] 会 返回 【属性 id 的 数据 为 'div01' 的 div 元 素 实 例 中 的 第 3 个 (索引 值 为 2) 】 


子 节 点 实例 。 此 语句 显示 出 其 第 3 个 子 节点 实例 


console.10g('') ; 


/* 


的 文本 "after"。 


欲 调试 时 ， 可 先 直 接 调 试 一 次 ， 并 观察 着 显示 在 浏览 器 的 调试 工具 【Console】 面 板 里 的 信息 


之 后 ， 进 一 步 消除 这 个 注释 在 此 处 的 开始 符号 【/*】 与 下 方 的 结束 符号 【*/】。 随 后 再 次 调试 ， 并 


观察 着 显示 的 信息 ， 以 便 深度 理解 其 差异 。 


document .body.normalize() ; 
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浏览 器 执行 此 语句 时 ,会 在 body 元 素 实例 中 ， 将 所 有 相 邻 的 数 个 文本 节点 实例 ， 合 并 成 为 单 
一 文本 节点 实例 。 
console.log(div01.childNodes) ; 
此 语句 显示 出 【NodeList(1) [textl】 的 信息 ， 意 味 着 原本 3 个 相 邻 的 文本 子 节点 实例 ， 被 合 
成 为 单一 文本 子 节点 实例 了 。 
console.log(div01.childNodes.length) ; 
整数 值 1， 意 味 着 其 当前 只 剩 下 1 个 子 节点 实例 了 。 
console.log(div01.childNodes[0]) ; 
div01.childNodes[0] 会 返回 【当前 在 属性 id 的 数据 为 'div01' 的 div 元 素 实例 中 的 第 1 个 (索引 
值 为 0) 】 子 节点 实例 。 此 语句 显示 出 其 第 1 个 子 节点 实例 当前 的 文本 "Happily ever after"。 


div01.childNodes.length 返 忆 


16.21 返回 父 节 点 实例 


通过 【数据 为 特定 元 素 实例 的 变量 名 称 】: 
ee 衔接 【.parentNode〗， 可 返回 特定 元 素 实例 的 父 节点 (parentnode ) 实例 。 
”衔接 【.parentElement】])， 可 返回 特定 元 素 实例 的 父 元 素 ( parent element ) 实例 。 


对 于 相关 的 综合 调试 ， 请 参看 如 下 示例 。 
【16-21-^-DOM-parentNode-and-parentElement.html】 


<!DOCTYPE html> 
<html> 
<head> 
<title>DOM parentNode and parentElement</title> 
</head> 
<body> 
<div id="div01"> 
<p id="p01"> 
<a id="a01l" href="#">Link 1</a> 
</p> 
</div> 
</body> 
<script> 
with (console) 
{ 
log(a0l.parentNode) ; 
log (a01.parentElement) ; 
Log ITY 


log(a0l.parentNode.id) ; 
lo0g (a01.parentElement .id 
logt"") ss 
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log (div01.parentNode) ; 
log (div01.parentElement) ; 
log('') ; 


lo0g (document .body .parentNode) ; 
lo0g (document .body.parentElement) ; 
log('') ; 


log (document .body .parentNode .ParentNode) ; 
log (document .documentElement .parentNode) ; 
log (document .documentElement .parentElement) ; 
} 
</script> 
</html> 


【相关 说 明 】 


<script> 
with (console) 
{ 


log(a0l.parentNode) ; 
log (a0l.parentElement) ; 


在 此 ，a01.parentNode 和 a01.parentElement 均 返 回 元 素 实例 【<p id="p01">...</p>】。 其 中 ， 
a01.parentNode 会 返回 属性 id 的 数据 为 a01' 的 a 元 素 实例 的 父 节 点 (parent node) 实例 ， 
a01.parentElement 则 会 返回 属性 id 的 数据 为 a01' 的 a 元 素 实例 的 父 元 素 (parent element) 实例 ; 只 
是 上 述 父 节点 实例 和 上 述 父 元 素 实 例 ， 当 前 刚好 对 应 到 同一 个 元 素 实例 【<p id="p01">...</p>】。 


log('') ; 


log(a0l.parentNode.id) ; 
log(a0l.parentElement.id) ; 


a01.parentNode.id 与 a01.parentElement.id 当前 均 返 回 字 符 串 'p01'。 


A 


log (div01.parentNode) ; 
log (div01.parentElement) ; 


div01.parentNode 和 div01.parentElement 均 返 回 元 素 实例 【<body>.…</body> 】。 其 中 ， 
div01.parentNode 会 返回 属性 id 的 数据 为 div01' 的 div 元 素 实 例 的 父 节 点 实例 ，div01.parentElement 
会 返回 属性 id 的 数据 为 'div01' 的 div 元 素 实 例 的 父 元 素 实例 ; 只 是 上 述 父 节点 实例 和 上 述 父 元 素 实 
例 ， 当 前 刚好 对 应 到 同一 个 元 素 实例 【<body>.…</body>】。 


log(''); 


lo0g (document .body.parentNode) ; 
log (document .body.parentElement) ; 


document.body.parentNode 和 document.body.parentElement 均 返 回 元 素 实例 [<html>..….</html> 】。 


其 中 , document.body.parentNode 会 返回 body 元 素 实例 的 父 节点 实例 , document.body.parentElement 
会 返回 body 元 素 实例 的 父 元 素 实 例 ; 只 是 上 述 父 节点 实例 和 上 述 父 元 素 实例 ,当前 刚好 对 应 到 同一 
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个 元 素 实例 【<html>...</html>】。 


log(''); 


lo0g (document .body .parentNode .parentNode) ; 
lo0g (document .documentElement .parentNode) ; 


加 


document.body.parentNode.parentNode 与 document.documentElement.parentNode 在 此 均 返 
#document。 


log (document .documentElement .parentElement) ; 


document.documentElement.parentElement 返回 null, 意味 着 其 并 不 存在 父 元 素 实例 ， 这 是 因为 
document.documentElement 对 应 的 元 素 实例 【<html>...</html>】， 己 经 是 当前 网 页 的 根 元 素 (root 
element) 实例 了 。 


16.22 ”删除 或 替换 子 季 点 实例 


通过 【数据 为 特定 元 素 实例 的 变量 名 称 】: 
”衔接 函数 【.removeChild()】 的 调用 ， 可 在 特定 元 素 实例 中 ， 删 除 特 定子 节点 实例 。 
”衔接 函数 【.replacechild()】〗 的 调用 ， 可 在 特定 元 素 实例 中 ， 替 换 特定 子 节点 实例 。 


对 于 相关 的 综合 调试 ， 请 参看 如 下 示例 。 
【16-22-^-DOM-removeChild-and-replaceChild.html]】 


<!DOCTYPE html> 
<html> 
<head> 
<title>DOM removeChild() and replaceChild()</title> 
</head> 
<body> 
<ul id="ul01"> 
<1i>Item 1</1i> 
<1i>Item 2</1i> 
<li>Item 3</1i> 
<li>Item 4</1i> 
<li>Item 5</1i> 
</ul> 
</body> 
<script> 
let refs = ul0l.children ; 


console.log(refs) ; 
console.10g('') ; 


ul01.removeChild (refs[2]) ; 
ul01.removeChild (refs[2]) ; 
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console.log(refs) ; 
Console.1og('') ; 


MAA 
let new item = document.createElement('1i') ; 


new item.innerHTML = "Special X' ; 


ul01.replaceChild(new item, refs[1]) ; 
</script> 
</html> 


【相关 说 明 】 


<script> 


let refs = ul01.children ; 
此 语句 声明 了 变量 refs， 其 初始 数据 为 【在 属性 id 的 数据 为 w101' 的 ul 元 素 实例 中 ， 其 所 有 子 
元 素 实 例 】 构 成 的 集合 。 
console.log(refs) ; 
此 语句 显示 出 【HTMLCollection(5) [li, 1i, i, li, 1 由】 的 信息 ,意味 着 变量 refs 所 代表 的 集合 ， 内 
含 5 个 在 元素 实 例 。 


console.10g('') ; 


ul01.removeChild (refs[2]) ; 
此 语句 在 属性 id 的 数据 为 ul01' 的 ul 元 素 实 例 中 ， 移 除了 其 当前 第 3 个 (索引 值 为 2) li 元 素 
实例 【<li>Item 3</li>】。 其 中 ，refs[2] 当 前 代表 变量 refs 的 集合 中 的 第 3 个 元 素 实例 【<li>Item 
3</li>】) 。 


ul01.removeChild (refs[2]) ; 


此 语句 在 属性 id 的 数据 为 ml01' 的 ul 元 素 实 例 中 ， 移 除了 其 当前 第 3 个 (索引 值 为 2) 1i 元 素 
实例 【<li>Item 4</li>】。 


console.log(refs) ; 


此 语句 显示 出 【HTMLCollection(3) [li, li, 11】 的 信息 ， 意 味 着 移 除了 其 两 个 元 素 实 例 之 后 ， 在 
变量 refs 所 代表 的 集合 里 ， 只 剩 下 3 个 元素 实 例 。 


console.10g('') ; 


let new item = document.createElement ('1i') ; 


此 语句 声明 了 变量 new_item， 其 初始 数据 为 document.createElement(li) 所 返回 的 新 的 1i 元 素 
实例 。 


new item.innerHTML = "Special X' ; 


此 语句 将 字符 串 'Special X'， 赋 给 了 变量 new_item 所 代表 的 li 元 素 实例 的 属性 innerHTML， 
使 得 fi 元 素 实例 的 内 容 文 本 ， 成 为 'Special X'。 
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ul01.replaceChild(new item, refs[1]) ; 

此 语句 使 得 变量 refs 所 代表 的 第 2 个 (索引 值 为 1) li 元 素 实例 ， 被 取代 成 为 变量 new_item 

所 代表 的 新 的 二 元 素 实例 。 也 因此 ， 在 属性 id 的 数据 为 ml01' 的 ul 元 素 实例 中 ， 其 当前 第 2 个 ( 索 
引 值 为 1) li 元 素 实例 中 的 文本 ， 从 'Ttem 2'， 变 成 'Special X'。 


16.23 ”获取 滚动 条 的 相关 数据 


通过 【数据 为 特定 元 素 实例 的 变量 名 称 】: 

衔接 【【.scrollLeft〗， 可 返回 特定 元 素 实例 的 水 平 滚动 条 的 当前 滚动 刻度 。 

衔接 【.scrollTop】〗 ， 可 返回 特定 元 素 实例 的 垂直 滚动 条 的 当前 滚动 刻度 。 

街 接 【.scrollWidthj， 可 返回 【在 特定 元 素 实例 中 ， 其 内 容 可 被 水 平 滚动 】 的 宽度 。 

衔接 【.scrollHeight]， 可 返回 【在 特定 元 素 实 例 中 ， 其 内 容 可 被 生 直 滚动 〗】 的 高 度 。 

衔接 函数 【.scrollIntoView()】〗 的 调用 ， 可 使 得 特定 元 素 实例 ， 被 显示 在 浏览 器 的 当前 窗口 
(window ) 或 特定 窗 格 (pane ) 中 。 


对 于 相关 的 综合 调试 ， 请 参看 如 下 示例 。 
【16-23-^-DOM-scroll-related-attributes.html]】 


<!DOCTYPE html> 
<html> 
<head> 
<title>DOM scroll related attributes</title> 
<style> 
body 
{ 
height: 1000px ; 
width: 2000px ; 
} 


#content 

{ 
width: 200px ; 
height: 140px ; 

padding: 10px ; 
background-color: GreenYellow ; 
overflow: scroll ; 

} 


#content p 

{ 
color: White ; 
padding: 5px ; 
width: 400px ; 
height: 300px ; 
border-radius: 5px ;? 
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content .onscroll = function (event) 
{ 
with (event.target) 
{ 
message02.innerHTML = ` (${scrollLeft}, ${scrollTop})  ; 
} 
} 


console.log(document .body.scrollHeight) ; 
console.log(document .body.scrollWidth) ; 
</script> 
</html> 


【相关 说 明 】 


<script> 
scroll button.onclick = function (event) 


{ 


p03.scrollIntoview() ; 
此 语句 使 得 属性 id 的 数据 为 'p03' 的 p 元 素 实例 ， 被 显示 在 当前 窗口 或 特定 窗 格 中 。 
| 
上 述 语法 将 带 有 参数 event 的 匿名 函数 的 定义 ， 赋 给 了 属性 id 的 数据 为 'scroll_button' 的 button 
元 素 实例 的 属性 onclick。 所 以 ， 在 button 元 素 实例 被 单 击 时 ， 上 述 匿 名 函数 就 会 被 调用 。 


window.onscroll = function (event) 


{ 
with (document .documentElement) 


{ 


message01 .innerHTML = “ (${scrollLeft}, ${scrollTop}). ; 

此 语句 使 得 属性 id 的 数据 为 "message01' 的 p 元 素 实例 的 内 容 文 本 ， 变 成 类 似 【(173, 231)】 的 
文本 ,代表 着 浏览 器 当前 窗口 的 水 平 滚动 条 的 滚动 刻度 〈 例 如 173 像素 ) 及 其 垂直 滚动 条 的 滚动 刻 
度 〈 例 如 231 像素 ) 。 

} 


在 上 述 关键 字 with 开头 的 整 段 语法 中 ， 子 语法 document.documentElement.scrollLeft 及 
document.documentElement.scrollTop， 在 其 大 括号 里 ， 被 简化 成 为 scrollLeft 和 scrollTop。 
} 
在 上 述 window.onscroll 开头 的 整 段 语法 中 , 则 将 带 有 参数 event 的 匿名 函数 的 定义 , 赋 给 了 代 
表 浏览 器 当前 窗口 的 window 对 象 实例 的 属性 onscroll。 所 以 ， 浏 览 器 窗口 的 内 容 被 滚动 时 ， 上 述 
匿名 函数 就 会 被 调用 。 
content .onscroll = function (event) 


{ 


with (event.target) 
{ 
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message02.innerHTML =“`($ftscrollLeft}，S$fscrollTop})、 

此 语句 使 得 属性 id 的 数据 为 "message02' 的 p 元 素 实例 的 内 容 文 本 ， 变 成 类 似 【(107, 360)】 的 
文本 ， 代 表 着 在 属性 id 的 数据 为 'content 的 div 元 素 实例 中 ， 其 当前 水 平 滚动 条 的 滚动 刻度 〈 例 如 
107 像素 ) 和 垂直 滚动 条 的 滚动 刻度 〈 例 如 360 像素 ) 。 

} 
} 

上 述 语法 将 带 有 参数 event 的 匿名 函数 的 定义 ， 赋 给 属性 id 的 数据 为 'content 的 div 元 素 实例 

的 属性 onscroll。 属 性 id 的 数据 为 'content' 的 div 元 素 实例 的 内 容 被 滚动 时 ， 上 述 匿名 函数 就 会 被 调 


console.1og(document.body.scrollHeight) ; 
document.body.scrollHeight 会 返回 【当前 网 页 可 被 垂直 滚动 的 内 容 】 的 高 度 ， 例 如 1000 像素 。 
console.1og(document.body.scrollWidth) ; 


document.body.scrollWidth 会 返回 【当前 网 页 可 被 水 平 滚动 的 内 容 】 的 宽度 ， 例 如 2000 像素 。 


16.24 练 习 题 


1. 已 知 如 下 HTML 源 代 码 片段 : 

<div id="div01" class="color02 border01 background03"> 太 阳 系 </div> 

试 编写 JavaScript 源 代码 ， 以 动态 将 上 述 div 元 素 实 例 的 属性 class 的 数据 ， 变 更 为 'color03 
border02 background01'。 

2. 试 编写 JavaScript 源 代码 片段 ， 以 获取 并 显示 当前 网 页 中 img 元 素 实例 的 个 数 。 

3. 已 知 在 当前 网 页 里 ， 存 在 如 下 JavaScript 源 代 码 片段 : 

function display() 

{ 


| 
} 


document .body .onclick = display ; 

试 编写 后 续 的 JavaScript 源 代码 片段 ,使 得 在 当前 网 页 中 ,任意 元 素 实例 被 单 击 时 ,函数 display0 
不 会 再 被 调用 。 

4. 试 编写 JavaScript 源 代码 片段 ， 以 计算 并 显示 出 在 当前 网 页 中 ，a 元 素 实例 对 应 的 超 链接 的 
个 数 。 

5. 试 编写 JavaScript 源 代码 片段 ， 以 显示 出 在 当前 网 页 的 body 元 素 实例 中 ， 其 子 元 素 实例 的 
个 数 。 


第 17 章 
BOM 的 多 个 对 象 实例 


在 浏览 器 对 象 模型 (BOM.browser object model) 中 ， 特 定 网 页 中 的 window 对 象 实例 ， 可 被 
视 为 根 对 象 (root object) 实例 。 在 window 对 象 实例 中 , 较 常 被 运用 的 , 有 document、 screen、 history 
与 location 子 对 象 实例 其中, document 子 对 象 实例 , 可 被 视 为 文档 对 象 模型 (DOM., document object 
model) 中 的 根 对 象 (root object) 实例 。 


17.1 window 对 象 实例 


在 JavaScript 语言 里 ，window 对 象 实例 即 是 对 应 到 容纳 当前 网 页 的 浏览 器 窗口 “window) 。 
在 特定 网 页 里 ， 任 意 iframe 元 素 实例 ， 亦 可 被 视 为 容纳 特定 子 网 页 的 子 窗口 。 


17.1.1 显示 多 种 对 话 框 与 搜索 特定 文本 


通过 函数 window.alert() 或 alert0 的 调用 ， 可 在 当前 网 页 上 ， 呈 现 出 警告 对 话 框 (alert dialogue 
box) 。 通 过 函数 window.confirm0 或 confirm0 的 调用 ， 可 在 当前 网 页 上 ， 呈 现 出 显示 确认 对 话 杠 
(confirm dialogue box) 。 通 过 函数 window.prompt0) 或 promptO 的 调用 ， 则 可 在 当前 网 页 上 ， 呈 现 
出 提示 对 话 框 (prompt dialogue box) 。 
通过 函数 window.open0 的 调用 ， 可 使 得 浏览 器 打开 内 含 另 一 网 页 的 新 窗口 (window) 。 通 过 
函数 window.findO 的 调用 ， 则 可 在 当前 网 页 中 ， 突 出 被 搜寻 到 的 文本 。 请 参看 如 下 示例 。 
【17-1-1-window-dialogues-and-find.html】 


<!DOCTYPE html> 
<html> 
<head> 
<title>window dialogues and find()</title> 
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{ 
// win _ obj = open(…) 
win obj = window.open ('http://www.tup.tsinghua.edu.cn/index.html', 'publisher', 'menubar, 
location, status, scrollbars, resizable') ; 
} 
</script> 
</html> 


【相关 说 明 】 


<script> 


let sentence = 'See ya...' ; 
声明 初始 数据 为 字符 串 'See ya..…' 的 变量 sentence。 
let isOK = false, isFound = false ; 
声明 初始 数据 均 为 布尔 值 false 的 变量 isOK 与 isFound。 
let given data = ''; 
声明 初始 数据 为 空 字 符 串 "的 变量 given_data。 
let win_obj = null ; 
声明 初始 数据 为 空 值 Cnull) 的 变量 win_obj。 


b01.onclick = function (event) 
{ 


// window.alert (sentence) ; 


alert (sentence) ; 
执行 此 语句 之 后 , 浏览 器 会 在 其 窗口 中 , 呈现 出 【显示 变量 sentence 中 的 数据 字符 串 'See ya..…】 
的 警报 〈alert) 对 话 框 。 
ps 
上 述 语 法 将 匿名 函数 的 定义 ， 赋 给 了 属性 id 的 数据 为 'b01' 的 button 元 素 实例 的 属性 onclick。 
一 旦 上 述 button 元 素 实例 被 单 击 时 ， 上 述 匿 名 函数 就 会 被 调用 。 


b02.onclick = function (event) 


{ 


// window.confirm(sentence) ; 
isOK = confirm(sentence) ; 


执行 此 语句 之 后 , 浏览 器 会 在 其 窗口 中 , 呈现 出 【显示 变量 sentence 中 的 数据 字符 串 'See ya..…'】 
的 确认 (confirm ) 对 话 框 。 当 用 户 单 击 此 对 话 框 内 的 确定 按钮 时 , 布尔 值 tue 就 会 被 赋 给 变量 isOK。 
若 用 户 此 时 按 下 键盘 上 的 ESC 键 或 者 单 击 此 对 话 框 的 取消 按钮 , 则 布尔 值 flse 会 被 赋 给 变量 isOK。 


// window.console.log(‘Is OK button pressed? S$fisOK} ) ; 
console.log(‘Is OK button pressed to close this window? S${isOK} ) ; 


此 语句 将 类 似 【Is OK button pressed to close this window? false】 的 信息 ， 显 示 在 浏览 器 的 调试 
工具 【Console】 面 板 里 。 
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if (isOK) 
// window.close() ; 
close() ; 


若 变量 isOK 的 数据 为 布尔 值 tue， 则 当前 的 浏览 器 窗口 会 被 关闭 。 
} 
上 述 语法 将 匿名 函数 的 定义 ， 赋 给 了 属性 id 的 数据 为 'b02' 的 button 元 素 实例 的 属性 onclick。 
一 旦 上 述 button 元 素 实例 被 单 击 时 ， 上 述 匿名 函数 就 会 被 调用 。 


b03.onclick = function (event) 
{ 


// window.prompt (sentence) ; 
given data = prompt ('Please input your mood','happy') ; 


执行 此 语句 之 后 ， 浏 览 器 会 在 其 窗口 中 ， 呈 现 出 显示 信息 【Please input your mood】 的 提示 
(prompt) 对 话 框 ， 并 请 求 用 户 在 【已 存在 默认 文本 'happy'】 的 输入 字段 里 ， 填 入 新 的 文本 。 当 用 
户 单 击 此 对 话 框 内 的 确定 按钮 时 ， 新 的 文本 字符 串 就 会 被 赋 给 变量 given_data。 


// window.console.log(‘Is OK button pressed? S$fisOK} ) ; 
console.log (“Given data: ${given data}’) ; 


语句 将 类 似 【Given data: delight】 的 信息 ， 显 示 在 浏览 器 的 调试 工具 【Console】 面 板 里 。 
given_data = prompt ('Please input the string to be found out.') ; 

执行 此 语 名 之后， 浏览 器 会 在 其 窗口 中 ， 呈 现 出 显示 信息 【Please input the string to be found 

out.】 的 提示 (prompt) 对 话 框 ， 并 请 求 用 户 在 没有 任何 默认 文本 的 输入 字段 里 ， 填 入 新 的 文本 。 

当 用 户 单 击 此 对 话 框 内 的 确定 按钮 时 ， 新 的 文本 字符 串 就 会 被 赋 给 变量 given_data。 
console.1og(`Given data: ${given data}’) ; 

语句 将 类 似 【Given data: carbon】 的 信息 ， 显 示 在 浏览 器 的 调试 工具 【Console】 面 板 里 。 


isFound = window.find(given data) ; 


i 


所 


在 本 示例 网 页 中 的 文本 【Lycopene is a symmetrical tetraterpene assembled from eight isoprene 
units. It is a member of the carotenoid family of compounds, and because it consists entirely of carbon 
and hydrogen, is also a carotene.】 里 ， 存 在 子 字符 串 'carbon'。 

若 变 量 given_data 的 数据 字符 串 为 'carbon'， 则 window .find(given_data) 会 返回 布尔 值 tue， 并 
突出 在 当前 网 页 里 的 文本 'carbon'。 此 语句 最 后 会 将 window.find(given_data) 返 回 的 布尔 值 false 或 者 
true， 赋 给 变量 isFound。 


console.1log(`Is Given data found on the page? S$fisFound} `) ; 
此 语句 将 类 似 【Is Given data found on the page? true】 的 信息 ， 显 示 在 浏览 器 的 调试 工具 
【Console】 面 板 里 。 
这 
上 述 语法 将 匿名 函数 的 定义 ， 赋 给 了 属性 id 的 数据 为 'b03' 的 button 元 素 实例 的 属性 onclick。 
一 旦 上 述 button 元 素 实例 被 单 击 时 ， 上 述 匿名 函数 就 会 被 调用 。 
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b04.onclick = function (event) 
{ 


win obj = window.open ('http://www.tup.tsinghua.edu.cn/index.html', 'publisher', ‘'menubar, 
location, status, scrollbars, resizable') ; 
在 此 语句 中 ,函数 window.open() 被 调用 时 ,会 将 网 址 [http://www.tup.tsinghua.edu.cn/index.html】 
对 应 的 网 页 ， 加 载 到 具有 如 下 特征 的 浏览 器 的 新 窗口 里 ， 并 返回 名 称 为 publisher 的 新 窗口 对 应 的 
window 对 象 实例 。 上 述 新 窗口 会 具有 菜单 栏 (menu bar) 、 网 址 栏 location bar) 、 状 态 栏 (status 
bar) 、 可 被 显示 的 滚动 条 (scroll bar) ， 以 及 可 被 调整 (resizable) 的 窗口 尺寸 。 
在 此 ， 函 数 window.open() 被 调用 时 ， 会 返回 上 述 新 窗口 对 应 的 window 对 象 实例 ， 并 赋 给 变 
量 win_obj。 所 以 可 通过 变量 win_obj， 再 次 访问 到 上 述 新 窗口 的 window 对 象 实例 的 内 置 属性 。 
bs 
上 述 语法 将 匿名 函数 的 定义 ， 赋 给 了 属性 id 的 数据 为 'b04' 的 button 元 素 实例 的 属性 onclick。 
一 旦 上 述 button 元 素 实 例 被 单 击 时 ， 上 述 匿名 函数 就 会 被 调用 。 


17.1.2 ”滚动 至 坐标 或 滚动 特定 距离 


通过 函数 window.scrollTo0) 或 者 scrollTo() 的 调用 ， 可 在 当前 网 页 的 内 容 中 ， 深 动 至 特定 坐标 。 
通过 函数 window.scrollBy0) 或 者 scrollBy() 的 调用 ， 则 可 在 当前 网 页 的 内 容 中 ， 深 动 特定 距离 。 请 
参看 如 下 示例 。 


【17-1-2-window-scrollTo-and-scrollBy.html】 


<!DOCTYPE html> 
<html> 
<head> 
<title>window scrollTo() and scrollBy()</title> 
<style> 
#button block 
{ 
position: fixed ; 
left: 30% ; 
top: 30% ; 
} 


#content 
{ 
background: linear-gradient (45deg, Gold, YellowGreen, RoyalBlue, Purple) ; 
width: 1500px ; 
height: 1500px ; 
} 
</style> 
</head> 
<body> 
<div id="button block"> 
<button id="scrol101">Scroll To</button> 
<button id="scrol102">Scroll By</button> 
</div> 
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【相关 说 明 】 


window.scrollTo(0, 500) 会 驱使 浏览 器 ， 将 当前 网 页 的 内 容 ， 滚 动 到 坐标 x 值 为 300 像素 、y 值 
为 500 像素 的 位 置 。 


上 述 语 法 将 匿名 函数 的 定义 ， 赋 给 了 属性 id 的 数据 为 'scroll01' 的 button 元 素 实例 的 属性 
onclick。 一 旦 上 述 button 元 素 实例 被 单 击 时 ， 上 述 匿 名 函数 就 会 被 调用 。 


window.scrollBy(20, 60) 会 驱使 浏览 器 ， 将 当前 网 页 的 内 容 ， 向 右 滚动 20 像素 ， 以 及 向 下 滚动 
60 像素 。 


上 述 语法 将 匿名 函数 的 定义 ， 赋 给 了 属性 id 的 数据 为 'scroll02' 的 button 元 素 实例 的 属性 
onclick。 一 旦 上 述 button 元 素 实例 被 单 击 时 ， 上 述 匿 名 函数 就 会 被 调用 。 
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17.2 screen 对 象 实例 


window.screen 对 象 实例 ， 可 被 简写 为 screen 对 象 实例 ， 内 含 当前 设备 的 屏幕 (screen) 的 相关 
数据 。 请 参看 如 下 示例 。 


【17-2-^-window-screen.html】 


<!DOCTYPE html> 


<html> 
<head> 


<title>window screen</title> 


</head> 
<body> 
</body> 
<script> 


// console.log(window.screen.width) ; 


console. 
console. 
console. 


console. 
console. 
console. 


console. 
console. 
console. 


</script> 
</html> 


log(screen.width) ; 
log(screen.height) ; 
10g('') 


log(screen.availWidth) ; 
log(screen.availHeight) ; 
lo0g('') 


log(screen.colorDepth) ; 
log(screen.pixelDepth) ; 
log('') 


【相关 说 明 】 


<script> 


// console.log(window.screen.width) ; 


console. 


log(screen.width) ; 


screen.width 会 返回 当前 设备 的 屏幕 的 宽度 ， 例 如 1360 像素 。 


768 像素 。 


console.log(screen.height) ; 
screen.height 会 返回 当前 设备 的 屏幕 的 高 度 ， 例 加 
console.10g('') 
console.log(screen.availWidth) ; 
screen.availWidth 会 返回 当前 浏览 器 窗口 可 被 占 上 
console.log(screen.availHeight) ; 


screen.availHeight 会 返回 当前 浏览 器 窗口 可 被 占 


console. 


的 宽度 (available width) ， 例 如 1360 像素 。 


lo0g("'') 


的 高 度 ， 例 如 728 像素 。 
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console.log(screen.colorDepth) ; 

screen.colorDepth 会 返回 当前 设备 的 屏幕 的 颜色 深度 (color depth) ， 也 就 是 用 来 表示 特定 颜 

色 的 比特 位 〈bit) 个 数 ， 例 如 24 比特 位 。 

console.log(screen.pixelDepth) ; 

Screen.pixelDepth 会 返回 当前 设备 的 屏幕 的 像素 深度 (pixel depth) ， 也 就 是 1 个 像素 占用 的 
比特 位 〈bit) 个 数 ， 例 如 24 比特 位 。 


17.3 history 对 象 实例 


window.history 对 象 实例 ， 可 被 简写 为 history 对 象 实例 ， 内 含 在 当前 浏览 器 窗口 里 ， 其 用 户 浏 
览 过 的 各 网 页 网 址 的 历史 (history) 记录 。 请 参看 如 下 带 有 3 个 源 代码 文档 的 示例 。 


【17-3-^-window-history.html]】 


<!DOCTYPE html> 
<html> 
<head> 
<title>window history</title> 
</head> 
<body> 
<button id="previous" disabled>Go back</button> 
<button id="next">Go next</button> 


<hl style="color: Gold">This is main Page.</hl> 
<a href="17-3-^-window-history-test-page-a.html"> 
Go to page a 
</a> 
</body> 
<script> 
next .onclick = function (event) 
{ 
// window.history.forward() ; 
// history.forward() ; 
history.go(1) ; 
这 
</script> 
</html> 


【相关 说 明 】 


<script> 
next .onclick = function (event) 
{ 
// window.history.forward() ; 
// history.forward() ; 


history.go(1) ; 
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此 语句 会 驱使 浏览 器 ， 访 问 其 历史 (history) 记录 中 的 下 一 个 〈1) 网 页 。 
PE 


上 述 语法 将 匿名 函数 的 定义 ， 赋 给 了 属性 id 的 数据 为 mext 的 button 元 素 实例 的 属性 onclick。 
一 旦 上 述 button 元 素 实例 被 单 击 时 ， 上 述 匿 名 函数 就 会 被 调用 。 


【17-3-^-window-history-test-page-a.html】 


【相关 说 明 】 


此 语句 会 驱使 浏览 器 ， 访 问 其 历史 (history) 记录 中 的 上 一 个 〈-1) 网页。 
ES 


上 述 语法 将 匿名 函数 的 定义 ， 赋 给 了 属性 id 的 数据 为 previous' 的 button 元 素 实 例 的 属性 
onclick。 一 旦 上 述 button 元 素 实例 被 单 击 时 ， 上 述 匿名 函数 就 会 被 调用 。 
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// history.next() ; 
history.go(1) ; 


此 语句 会 驱使 浏览 器 ， 访 问 其 历史 (history) 记录 中 的 下 一 个 网 页 。 
} 


上 述 语法 将 匿名 函数 的 定义 ， 赋 给 了 属性 id 的 数据 为 mext' 的 button 元 素 实例 的 属性 onclick。 
一 旦 上 述 button 元 素 实例 被 单 击 时 ， 上 述 匿名 函数 就 会 被 调用 。 


【17-3-^-window-history-test-page-b.html】 


<!DOCTYPE html> 
<html> 
<head> 
<title>window history test page b</title> 
</head> 
<body> 
<button id="previous">Go back</button> 
<button id="next" disabled>Go next</button> 


<hl style="color: GreenYellow">This is test page b</hl> 
</body> 
<script> 
Previous.onclick = function (event) 
{ 
// history.back() ; 
history.go(-1) ; 
</script> 
</html> 


【相关 说 明 】 


<script> 
Previous.onclick = function (event) 


{ 


// history.back() ; 
history.go(-1) ; 


此 语句 会 驱使 浏览 器 ， 访 问 其 历史 (history) 记录 中 的 上 一 个 〈-1) 网 页 。 
} 
上 述 语法 将 匿名 函数 的 定义 ， 赋 给 了 属性 id 的 数据 为 previous' 的 button 元 素 实 例 的 属性 
onclick。 一 旦 上 述 button 元 素 实例 被 单 击 时 ， 上 述 匿 名 函数 就 会 被 调用 。 


17.4 location 对 象 实例 


window.location 对 象 实例 ,可 被 简写 为 location 对 象 实例 , 用 来 获取 或 设置 浏览 器 窗口 内 的 当 
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前 网 页 的 网 址 。 请 参看 如 下 示例 。 
【17-4-^-window-location.html]】 


<!DOCTYPE html> 
<htm1> 
<head> 
<title>window location</title> 
</head> 
<body> 
<button id="assign btn">Assign new URL</button> 
</body> 
<script> 
// console.log(window.location) ; 
console.log(location) ; 
console.1o0g('') 


console.log(location.protocol) ; 
console.log(location.hostname) ; 
console.log(location.port) ; 
console.log(location.pathname) ; 
console.log(location.href) ; 


assign btn.onclick = function (event) 
{ 
// location.href = 'http://www.tup.tsinghua.edu.cn/index.html' ; 
location.assign('http://www.tup.tsinghua.edu.cn/index.html') ; 
了 
</script> 
</html> 


【相关 说 明 】 
<script> 


// console.log(window.location) ; 
console.log(location) ; 


window.location 或 者 location 均 会 返回 【内 含 当 前 网 页 的 网 址 相关 数据 】 的 location 对 象 实例 。 
此 语句 当前 会 显示 出 类 似 【 Location {replace: f,，assign: f ,href: "file:///D:/examples/html/ 
17-4-^-window-location.html", ancestorOrigins: DOMStringList origin: "file://",…} 的 可 展开 的 信息 。 


console.10g('') ; 


console.log(location.protocol) ; 
location.protocol 会 返回 当前 网 页 的 网 址 中 的 协议 代号 字符 串 ， 例 如 'file:' 或 'http:'。 
console.log(location.hostname) ; 
location.hostname 会 返回 当前 网 页 的 网 址 中 的 主机 名 称 (host name ) ， 例 如 'localhost'、 
"www.localcom' 或 空 字符 串 " 等 。 若 用 户 并 未 通过 HTTP 协议 ， 浏 览 当 前 网 页 ， 则 被 返回 的 主机 名 
浆 会 是 空 字 符 


s 


二 


console.log(location.port) ; 
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location.port 会 返回 当前 网 页 的 网 址 中 的 端口 号 (port number) ， 例 如 字符 串 '80' 或 空 字符 串 " 等 。 
console.log(location.pathname) ; 


location.pathname 会 返回 当前 网 页 的 网 址 中 的 路 径 名 称 (path name ) ， 例 如 
【/D:/examples/html/17-4-^-window-location.html】 或 【/html/17-4-^- window-location.html】 等 。 


console.log(location.href) ; 


location.href 会 返回 当前 网 页 的 完整 网 址 ， 例 如 【 file:///D:/examples/html/ 
17-4-^-window-location.html】 或 者 【http:// 主 机 名 称 /html17-4-^-window-location.html】 等 。 


assign btn.onclick = function (event) 
{ 


// location.href = 'http://www.tup.tsinghua.edu.cn/index.html' ; 
location.assign('http://www.tup.tsinghua.edu.cn/index.html') ; 


此 语句 会 驱使 浏览 器 ， 加 载 网 址 【http://www.tup.tsinghua.edu.cn/index.htm1】 对 应 的 网 页 。 
} 
上 述 语 法 将 匿名 函数 的 定义 ， 赋 给 了 属性 id 的 数据 为 'assign-btn' 的 button 元 素 实例 的 属性 
onclick。 一 旦 上 述 button 元 素 实例 被 单 击 时 ， 上 述 匿 名 函数 就 会 被 调用 。 


17.5 练 习 题 


1. 试 编写 JavaScript 源 代码 片段 ， 可 在 不 直接 与 间接 调用 函数 assign() 的 情况 下 ， 等 价 于 
JavaScript 语句 【location.assign('http:/www.tup.tsinghua.edu.cn/index.html") ;】 的 效果 。 

2. 试 编写 JavaScript 源 代码 片段 ， 可 在 不 直接 与 间接 调用 函数 forward0 的 情况 下 ， 等 价 于 
JavaScript 语句 【history.forward0 ;】。 


在 JavaScript 语言 里 ， 类 (class) 的 自 定义 语 法 ， 具 有 面向 对 象 编程 (OOP，objectroriented 
programming) 的 理念 ， 使 得 特定 的 类 ， 如 同 具有 特定 功能 的 模块 (module) ， 可 用 来 创建 作为 其 
副本 的 对 象 (object) 实例 。 


18.1 类 的 定义 和 继承 


定义 特定 的 类 ， 必 须 通 过 关键 字 class 的 协助 。 欲 使 得 特定 子 类 (sub class) ， 继 承 自 特定 父 
类 (parent class) ， 则 必须 通过 关键 字 extends 的 协助 。 请 参看 如 下 示例 。 


【18-1-^-class-definitions-and-inheritance.js } 


class RadiusClass 
{ 
constructor (r) 
{ 
this.r =t 3 


} 


circumference(r = this.r) 
{ 

return 2 * MathPI * r 3 
} 


circle area(r = this.r) 
{ 
Es 
. 
} 
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【相关 说 明 】 
请 参考 本 节 后 面 的 相关 说 明 。 


18.1.1 类 的 定义 (ES6) 


在 类 的 定义 语法 中 ， 存 在 关键 字 class、 类 名 (class name) ， 以 及 一 对 大 括号 里 的 类 体 (class 
body) 。 类 体 可 内 含 成 员 函 数 (member function) ， 例 如 由 关键 字 constructor 开头 的 唯一 的 构造 函 
数 《constructor) ， 以 及 不 带 关键 字 function 开头 的 多 个 自 定义 函数 。 

欲 在 类 里 ， 定 义 数据 成 员 (data member) / 成 员 变量 (member variable) ， 则 必须 在 特定 成 员 
函数 〈 例 如 构造 函数 ) 的 定义 语法 中 ， 通 过 内 置 的 局 部 变量 this 来 实现 ， 例 如 【thisr = 100 ;】 或 
者 【thisr=r;】 等 语法 。 
本 


此 语法 通过 关键 字 class， 设 置 了 类 名 RadiusClass。 
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this.r = rs}; 
此 语句 将 【其 构造 函数 被 调用 时 的 参数 r】 的 数据 ， 赋 给 了 类 RadiusClass 的 对 象 实例 的 成 员 
变量 this.r。 其 中 ， 内 置 的 局 部 变量 this， 是 用 来 指向 此 类 的 特定 对 象 实例 的 指针 〈pointer) 变量 。 
} 
上 述 语法 在 类 RadiusClass 的 定义 语法 里 ， 进 一 步 定义 了 带 有 参数 r 的 构造 函数 constructor()。 
请 留意 ， 在 JavaScript 语言 中 ， 调 用 特定 类 的 构造 函数 的 语法 ， 并 不 是 借助 名 称 constructor， 而 是 
通过 其 类 名 ， 再 加 上 一 对 带 有 被 传 入 的 参数 数据 的 小 括号 ， 例 如 RadiusClass(10)。 


circumference(r = this.r) 
{ 


return 2 * Math.PI * r 
在 此 语句 中 ， 参 数 r 的 数值 ， 代 表 特 定 半径 值 。 所 以 ， 此 语句 返回 了 特定 半径 值 的 圆周 长 。 
} 
上 述 语 法 定义 了 带 有 参数 r 的 成 员 函 数 circumference()。 其 中 ， 参 数 r 被 设置 了 默认 值 ， 所 以 
若 成 员 函 数 circumference0 被 调用 时 ， 未 被 传 入 参数 r 的 数据 ， 则 参数 r 的 默认 值 ， 就 会 是 【在 类 
RadiusClass 的 特定 对 象 实例 中 ， 其 成 员 变量 this.r】 的 数值 。 


circle_area(r = this.r) 


{ 


return Math.PI * r*r; 

此 语句 返回 了 【以 参数 r 的 数值 为 半径 值 】 的 圆 面 积 。 

上 述 语法 定义 了 带 有 参数 r 的 成 员 函 数 circle_area0。 其 中 ， 参 数 r 被 设置 了 默认 值 。 所 以 车 
成 员 函 数 circle_area() 被 调用 时 ,未 被 传 入 参数 r 的 数据 , 则 参数 r 的 默认 值 ,就 会 是 [在 类 RadiusClass 
的 特定 对 象 实例 中 ， 其 成 员 变 量 this.r】 的 数值 。 

} 

上 述 语法 定义 了 内 含 3 个 函数 的 类 RadiusClass。 

let rc01 = new RadiusClass(10) ; 
语句 声明 了 变量 rc01， 其 初始 数据 为 【类 RadiusClass 的 构造 函数 constructor(10) 被 调用 时 ， 
所 返回 】 的 类 RadiusClass 的 对 象 实例 。 

console.1log (rc01.circumference()) ; 

在 此 ， 变 量 rc01 所 代表 的 类 RadiusClass 的 对 象 实例 ， 内 含 成 员 变 量 r 的 数值 10。 所 以 ， 
rc01.circumference(O 当 前 会 返回 半径 值 为 10 的 圆周 长 62.83185307179586。 


入 


console.1log (rc01.circumference (15)) ; 


rc01.circumference(15) 会 返回 半径 值 为 15 的 圆周 长 94.24777960769379。 
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18.1.2 ”类 的 继承 〈ES6 ) 


在 类 的 继承 (inheritance) 语法 中 ， 主 要 借助 关键 字 extends， 以 及 其 前 方 与 后 方 的 两 个 类 名 。 
例如 在 语法 【class Cylinder extends RadiusClass { ..…}】 中 , 其 前 方 的 类 Cylinder 为 子 类 (sub class ) ， 
其 后 方 的 类 RadiusClass 为 父 类 (parent class) 。 有 了 继承 关系 之 后 ， 在 子 类 的 函数 内 ， 欲 访问 父 
类 的 成 员 时 ， 可 通过 代表 着 父 类 的 对 象 实例 的 关键 字 super 来 达成 。 

class Cylinder extends RadiusClass 

此 语法 通过 关键 字 extends， 使 得 子 类 Cylinder， 继 承 自 父 类 RadiusClass。 


{ 
Constructor (r, h) 
{ 


super (r) ; 
super(r) 被 调用 时 ， 等 同 于 调用 了 父 类 RadiusClass 的 构造 函数 constructor(r)。 


this.r 一 工 ， 
this.h=h; 


这 两 个 语句 将 【构造 函数 constructor0) 被 调用 时 ， 其 被 传 入 的 参数 r 与 h】 的 数据 ， 分 别 赋 给 
了 类 Cylinder 的 特定 对 象 实例 的 成 员 变量 this.r 与 this.h。 
} 
上 述 语法 在 类 Cylinder 的 定义 语法 中 , 进一步 定义 了 带 有 参数 r 与 h 的 构造 函数 constructor()。 
请 留意 ， 在 JavaScript 语言 中 ， 调 用 特定 类 的 构造 函数 的 语法 ， 并 不 是 借助 名 称 constructor， 而 是 
通过 其 类 名 ， 再 加 上 一 对 带 有 被 传 入 的 参数 数据 的 小 括号 ， 例 如 Cylinder(20, 30)。 


Volume (上 = this.r, h = this.h) 
{ 


return Super .circle_area(r) * h 

此 语句 返回 了 特定 圆柱 体积 。 

} 

上 述 语法 定义 了 带 有 参数 r 与 h 的 成 员 函 数 volume()。 其 中 ， 参 数 r 与 h 均 被 设置 了 默认 值 。 
所 以 车 函数 volume0 被 调用 时 ， 未 被 传 入 参数 与 h 的 数据 ， 则 参数 r 的 默认 值 ， 就 会 是 【在 类 
RadiusClass 的 特定 对 象 实例 中 ， 其 成 员 变 量 this.r】 的 数值 ， 而 参数 h 的 默认 值 ， 就 会 是 【在 类 
RadiusClass 的 特定 对 象 实例 中 ， 其 成 员 变 量 this.h】 的 数值 。 


surface arealr = this.r, h = this.h) 
{ 


return 2 * super.circle area(r) + super.circumference(r) * h; 
此 语句 返回 了 特定 圆柱 体 表 面积 。 


} 
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上 述 语 法 定义 了 带 有 参数 r 与 h 的 成 员 函 数 surface_area()。 其 中 ,参数 r 与 h 均 被 设置 了 默认 

值 。 所 以 若 函数 surface_area() 被 调用 时 ， 未 被 传 入 参数 rz 与 h 的 数据 ， 则 参数 r 的 默认 值 ， 就 会 是 
【在 RadiusClass 类 的 特定 对 象 实例 中 , 其 成 员 变 量 this.r]】 的 数值 ; 而 参数 h 的 默认 值 , 就 会 是 【在 

RadiusClass 类 的 特定 对 象 实例 中 ， 其 成 员 变量 this.h】 的 数值 。 

} 

上 述 语法 定义 了 【内 含 3 个 函数 ， 并 且 继 承 自 父 类 RadiusClass】 的 子 类 Cylinder。 

let c01 = new Cylinder (20, 30) ; 

此 语句 声明 了 变量 c01， 其 初始 数据 为 【类 Cylinder 的 构造 函数 constructor(20, 30) 被 调用 时 ， 
所 返回 】 的 类 Cylinder 的 新 对 象 实例 。 

console.log(c01.volume()) ; 

在 变量 c01 所 代表 的 类 Cylinder 的 对 象 实例 中 ， 存 在 成 员 变 量 r 的 数值 20 与 成 员 变 量 h 的 数 
值 30。 所 以 ，c01.volume0 当 前 会 返回 半径 值 为 20、 高 度 值 为 30 的 圆柱 体积 37699.11184307752。 

console.log(c01.surface_area()) ; 


c01.surface_area() 会 返回 半径 值 为 20、 高 度 值 为 30 的 圆柱 体 表 面积 6283.185307179587。 


18.2 ”类 的 静态 成 员 


关键 字 static 开头 的 函数 的 定义 语法 ， 是 用 来 描述 类 的 静态 〈static) 函数 〈function ) / 方法 
Cmethod) ， 例 如 : 


class Cubic 
{ 
| 


static about () 


c01 = new Cubic(""*) 

请 留意 ， 调 用 特定 类 的 静态 函数 的 语法 ， 必 须 通 过 其 类 名 ， 而 不 是 借助 【数据 为 特定 类 的 对 
象 实例 】 的 变量 名 称 。 举 例 来 说 ， 已 知 变量 c01 的 数据 为 类 Cubic 的 对 象 实例 ， 此 时 调用 类 Cubic 
的 静态 函数 about0 的 语法 为 【Cubic.about()】， 而 不 是 【c01.about()】。 关 于 类 的 静态 成 员 的 综合 
运用 ， 请 参看 如 下 示例 。 


【18-2-^-class-static-members.js】 


class Cubic 
{ 
constructor (1l, w, h) 
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【相关 说 明 】 
请 参看 本 节 后 面 的 相关 说 明 。 


18.2.1 静态 成 员 的 概念 和 定义 “ES6) 


所 谓 的 静态 成 员 (static member) 是 被 共用 的 成 员 。 在 JavaScript 语言 中 ， 对 于 静态 成 员 ， 尚 
未 支持 静态 数据 成 员 (static data member) / 静态 成 员 变 量 (static member variable) ， 当 前 仅 限 于 
静态 成 员 函 数 static member function ) 。 请 参看 下 面 的 说 明 。 


此 语法 通过 关键 字 class， 设 置 了 类 名 Cubic。 


Javascript 编程 思想 : 从 ES5 到 ES9 


510 


this .width = w 
this height = h ; 


在 其 构造 函数 constructor0 被 调用 时 , 这 3 个 语句 可 将 参数 1、w 与 h 的 数据 , 分 别 赋 给 类 Cubic 
的 特定 对 象 实例 的 成 员 变 量 this.length、this.width 与 this.height。 其 中 ， 内 置 的 局 部 变量 this， 是 用 
来 指向 类 Cubic 的 特定 对 象 实例 的 指针 (pointer〉 变量 。 
j 
上 述 语 法 在 类 Cubic 的 定义 语法 中 ， 进 一 步 定义 了 带 有 参数 r 的 构造 函数 constructor()。 请 留 
意 ， 在 JavaScript 语言 中 ， 调 用 特定 类 的 构造 函数 的 语法 ， 并 不 是 借助 名 称 constructor， 而 是 通过 
其 类 名 ， 再 加 上 一 对 带 有 被 传 入 的 参数 数据 的 小 括号 ， 例 如 Cubic(15, 23, 37)。 


volume (1 = this.length, w = this.width, h = this.height) 
{ 


return 1 *w*h’; 
此 语句 返回 了 特定 方 体积 。 
} 
上 述 语法 定义 了 带 有 参数 1、w 与 h 的 成 员 函 数 volume()。 其 中 ， 参 数 1、w 与 h 均 被 设置 了 
默认 值 。 若 函数 volume0 被 调用 时 ， 未 被 传 入 参数 1、w 或 h 的 数据 ， 则 : 

e@ 参数 1 的 默认 值 ， 就 会 是 【在 类 Cubic 特定 对 象 实例 中 ， 其 成 员 变 量 this.length】 的 数值 。 

e 参数 w 的 默认 值 ， 就 会 是 【在 类 Cubic 特定 对 象 实例 中 ， 其 成 员 变量 this.width】 的 数值 。 
”参数 h 的 默认 值 ， 就 会 是 【在 类 Cubic 特定 对 象 实例 中 ， 其 成 员 变 量 this.height】 的 数值 。 


surface area(1 = this.length, w = this.width, h = this.height) 
{ 


De 
上 述 语法 返回 了 特定 方 体 表面 积 。 
} 
上 述 语 法 定义 了 带 有 参数 1、w 与 h 的 成 员 函 数 surface_area()。 其 中 ， 参 数 1、w 与 h 均 被 设 
置 了 默认 值 。 若 函数 surface_area() 被 调用 时 ， 未 被 传 入 参数 1、w 或 h 的 数据 ， 则 : 

”参数 1 的 默认 值 ， 就 会 是 【在 类 Cubic 特定 对 象 实例 中 ， 其 成 员 变量 this.length】〗 的 数值 。 

日 参数 w 的 默认 值 ， 就 会 是 【在 类 Cubic 特定 对 象 实例 中 ， 其 成 员 变 量 this.width】 的 数值 。 

@ 参数 h 的 默认 值 ， 就 会 是 【在 类 Cubic 特定 对 象 实例 中 ， 其 成 员 变 量 thisheight】 的 数值 。 


static about () 
{ 

console.log('This Class is about calculations of cubic volume and surface area.') ; 
} 


上 述 语 法 定义 了 静态 成 员 函 数 about()， 并 用 来 显示 出 【This Class is about calculations of cubic 


volume and surface area.】 的 信息 。 


} 
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上 述 语法 定义 了 类 Cubic 。 
18.2.2 ”静态 成 员 的 运用 (ES6) 


无 论 特定 类 的 对 象 实例 有 多 少 个 ， 其 各 个 对 象 实例 均 是 共用 所 有 的 静态 成 员 ! 也 就 是 说 ， 调 
用 其 静态 成 员 函 数 的 方式 ， 例 如 Cubic.about0， 并 不 是 通过 【数据 为 特定 类 的 对 象 实例 】 的 变量 名 
称 〈 例 如 c01) ， 而 是 借助 其 类 名 (例如 Cubic) 。 请 参看 如 下 说 明 。 

c01 = new Cubic(15，23，37) ; 
此 语句 声明 了 变量 c01， 其 初始 数据 为 【类 Cubic 的 构造 函数 constructor(15, 23, 37) 被 调用 时 ， 
所 返回 】 的 类 Cubic 的 对 象 实例 。 

console.1log(c01.volume()) ; 
变量 c01 所 代表 的 类 Cubic 的 对 象 实例 ， 内 含 成 员 变量 1、w 与 h 的 个 别 数值 15、23 与 37。 
c01.volume() 会 返回 长 度 为 15、 宽 度 为 23、 高 度 为 37 的 方 体积 12765。 

console.log(c01l.volume (10, 20, 30)) ; 


c01.volume(10, 20, 30) 则 会 返回 长 度 为 10、 宽 度 为 20、 高 度 为 30 的 方 体积 6000。 


console.1og(c01.surface_area()) ; 
c01.surface_area() 会 返回 长 度 为 13、 宽度 为 23、 高 度 为 37 的 方 体 表面 积 3502。 
console.log(c01.surface area(10, 20, 30)) ; 


c01.surface_area(10, 20, 30) 则 会 返回 长 度 为 10、 宽 度 为 20、 高 度 为 30 的 方 体 表面 积 2200。 


Cubic.about () ; 

Cubic.about() 会 显示 出 【This Class is about calculations of cubic volume and surface area. ] 的 信息 。 
因为 函数 about() 被 定义 成 为 类 Cubic 的 静态 成 员 函 数 ， 所 以 调用 函数 about() 的 语法 ， 并 不 是 通过 
【数据 为 类 Cubic 的 特定 对 象 实例 】 的 变量 名 称 c01， 例 如 【c01.about()】， 而 是 借助 类 名 Cubic， 

例如 【Cubic.about()】。 

c01.about() ; 

若 通过 变量 名 称 c01, 来 调用 类 Cubic 的 静态 成 员 函 数 about(), 则 会 产生 【Uncaught TypeError: 
c01.about is not a function】 的 错误 信息 。 


18.3 ”类 的 设置 器 和 取得 器 


类 的 设置 器 〈setter) 和 取得 器 (getter) ， 可 分 别 用 来 设置 或 取得 【经 过 动态 评估 之 后 】 的 数 
据 。 其 设置 器 和 取得 器 的 定义 语法 ， 除 了 开头 的 关键 字 set 和 get 之 外 ， 其 余部 分 均 相 同 于 不 带 关 
键 字 fonction 的 函数 的 定义 语法 。 请 参看 如 下 示例 。 
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【18-3-^-class-setter-and-getter.js】 


【相关 说 明 】 
请 参看 本 节 后 面 的 相关 说 明 。 


18.3.1 ”设置 器 和 取得 器 的 概念 和 定义 (ES6) 


设置 器 如 同 是 【会 动态 设置 特定 成 员 变 量 的 数据 】 的 函数 ， 取 得 器 则 如 同 是 【会 动态 返回 特 
定 成 员 变量 的 数据 】 的 函数 。 请 参看 如 下 说 明 。 
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在 其 构造 函数 constructor() 被 调用 时 ， 这 4 个 语句 可 分 别 将 其 参数 name、age、gender 与 
department 的 数据 , 赋 给 类 Person 的 特定 对 象 实例 的 个 别 成 员 变 量 this._name、this. age、this._gender 
与 this. department。 其 中 ， 内 置 的 局 部 变量 this， 是 用 来 指向 类 Person 的 特定 对 象 实例 的 指针 
(pointer) 变量 。 
} 


上 述 语法 在 类 Person 的 定义 语法 中 ,进一步 定义 了 带 有 参数 name、age、gender 与 department 

的 构造 函数 constructor()。 请 留意 ， 在 JavaScript 语言 中 ， 调 用 特定 类 的 构造 函数 的 语法 ， 并 不 是 
借助 名 称 constructor, 而 是 通过 其 类 名 , 再 加 上 一 对 带 有 被 传 入 的 参数 数据 的 小 括号 , 例如 Person() 
或 者 Person(Jasper, 28, "male'，IT) 等 。 其 中 ， 参 数 name、age、gender 与 department 均 被 设置 了 默 
认 数 据 为 字符 '"。 若 其 构造 函数 constructor0 被 调用 时 ， 未 被 传 入 上 述 各 参数 的 数据 ， 则 上 述 各 参 
数 的 默认 数据 ， 就 会 是 字符 '?'。 

set name (new name) 

{ 

this. name = new name ; 


console.log('Name is edited!') ; 


} 
此 语法 通过 关键 字 set， 成 为 了 类 Person 的 name 设置 器 。 其 中 ，name 设置 器 被 访问 (调用 ) 
时 ， 必 须 省 略 其 小 括号 。 例 如 语句 【p01.name = 'Jasper' :】， 可 使 得 字符 串 Jasper， 间 接 被 赋 给 变 
量 p01 的 对 象 实例 的 成 员 变 量 this._ name。 
get name () 
{ 
console.log('Name is got!') ; 


return this. name ; 


} 
此 语法 通过 关键 字 get， 成 为 了 类 Person 的 name 取得 器 。 其 中 ，name 取得 器 被 访问 (调用 ) 
时 ， 也 必须 省 略 其 小 括号 。 例 如 语法 【p01.name】， 可 返回 【在 变量 p01 的 对 象 实例 中 ， 其 成 员 变 
量 this. name】 的 数据 字符 串 'Jasper'。 
} 
上 述 语法 定义 了 类 Person。 


18.3.2 ”设置 器 和 取得 器 的 运用 (ES6) 


在 特定 类 的 特定 对 象 实例 中 ， 特 定 设置 器 和 取得 器 的 访问 语法 ， 均 如 同 于 特定 成 员 变量 的 访 
问 语法 。 例 如 : 
@ ”已 知 语句 【let p01 =new Person() ;】 是 用 来 声明 【数据 为 类 Person 的 对 象 实例 】 的 变量 p01。 
@ 若 其 name 设置 器 的 定义 语法 为 【set name (new_name) { …。 }】 则 name 设 置 器 的 访问 语法 ， 
就 会 是 【pO0l.name】 
@ 若 其 name 取得 器 的 定义 语法 为 【get name () {。** }】， 则 name 取得 器 的 访问 语法 ， 就 会 是 
【p01 = Jasper ;}. 
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let p01 = new Person() ; 

此 语句 声明 了 变量 p01， 其 初始 数据 为 【类 Person 的 构造 函数 constructor() 被 调用 时 ， 所 返 
的 类 Person 的 对 象 实例 。 

console.log(p0l.name) ; 

p01.name 会 访问 到 类 Person 的 name 取得 器 ， 间 接 返回 【在 变量 p01 的 对 象 实例 中 ， 其 成 员 
变量 this. name】 的 默认 数据 字符 '?'。 

P01.name = "Jasper' ; 

此 语句 会 访问 到 类 Person 的 name 设置 器 , 间接 设置 【在 变量 p01 的 对 象 实例 中 ， 其 成 员 变 量 
this.name】 的 数据 ， 成 为 字符 串 Jasper'。 

console.log(p0l.name) ; 

p01.name 会 再 次 访问 到 类 Person 的 name 取得 器 ， 间 接 返 回 【 在 变量 p01 的 对 象 实例 中 ， 其 
成 员 变 量 this. name】 的 当前 数据 字符 串 'Jasper'。 


console.1og('') ; 


五 
a 


console.log(p01. name) ; 


p01._name 则 会 直接 返回 【在 变量 p01 的 对 象 实例 中 ， 其 属性 _name】 的 数据 字符 串 'Jasper'。 


18.4 练 习 题 


. 编写 JavaScript 源 代码 ， 以 定义 1 个 内 含 如 下 函数 的 类 〈class) : 

”用 来 计算 并 返回 Dr whorefne N|7 三? ]} 函数 sum(n)。 

@ 用 来 计算 并 返回 ba ,where {ne N|n 之 2} 的 函数 square_sum(n)。 

日 用 来 计算 并 返回 > ,where {ne N|n 之 2} 的 函数 cube_sum(n)。 

2. 编写 JavaScript 源 代码 ， 以 定义 1 个 内 含 如 下 函数 的 类 (class》: 

。 用 来 计算 并 返回 be x, where {ne Nn 之 2 } 的 函数 altemate_ sum(n). 


@ 用 来 计算 并 返回 py x? ,where{ne N|7 2 } 的 函数 alternate square_sum(n)。 
x=1 


@ 用 来 计算 并 返回 Yr -x? ,where {ne N|72 三 2 } 的 函数 alternate_cube_sum(n). 
3. 试 改写 第 2 题 的 类 ， 以 继承 自 第 1 题 的 类 。 
4. 请 在 JavaScript 语言 的 各 个 内 置 的 对 象 里 ， 找 出 至 少 7 个 静态 函数 。 
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5. 已 知 如 下 JavaScript 源 代 码 片 段 : 


试 编写 JavaScript 源 代 码 的 语法 : 
(1) 以 通过 变量 t01， 调 用 到 类 Triangle 的 函数 display()。 
(2) 以 通过 变量 t01， 调 用 到 类 Shape 的 函数 display()。 
(3) 进而 改写 类 Triangle 的 定义 语法 ， 使 得 调用 类 Triangle 的 函数 display0 时 ， 可 连带 调用 
到 类 Shape 的 函数 display()。 


彰 误 处 理 


在 支持 特定 编程 语言 的 集成 开发 环境 中 ， 执 行 开发 中 的 应 用 程序 时 ， 若 发 生 任何 异常 错误 
(exception error) ， 则 汇编 器 (assembler) 、 编 译 器 (compiler) 或 解释 器 〈interpreter) ， 应 该 显 
示 特定 的 错误 信息 ， 以 供 编程 人 员 进 行 调试 。 

JavaScript 引擎 属于 解释 器 的 一 种 ,一边 解释 (interpret) 特定 源 代码 片段 ,一边 立即 执行 对 应 
的 任务 。 在 特定 应 用 程序 里 ， 若 潜藏 着 未 被 发 觉 的 特定 异常 错误 ， 则 可 能 会 导致 用 户 在 操作 时 ,看 
见 无 法 理解 的 相关 错误 信息 。 

欲 使 得 本 来 无 法 被 理解 的 相关 错误 信息 ， 成 为 用 户 可 以 理解 或 者 不 会 看 见 的 错误 信息 ， 则 编 
程 人 员 必 须 加 以 编写 ， 用 来 处 理 特定 异常 错误 的 相关 源 代码 片段 才 行 。 


19.1 异常 错误 的 种 类 


在 JavaScript 语言 中 ， 常 见 的 异常 错误 种 类 ， 大 致 如 下 : 

语法 (syntax ) 错误 

数据 类 型 ( data type ) 错误 

范围 (range ) 错误 

引用 (reference ) 错误 

网 址 (URI / URL, uniform resource identifier / uniform resource locator ) 的 编码 (encoding ) 或 
者 解码 ( decoding ) 错误 

@ 有 还 辑 (logical ) 错误 


其 中 ， 逻 辑 错误 的 主要 原因 ， 是 编程 人 员 思 考 得 不 够 周全 而 导致 的 ， 所 以 汇编 嚣 、 编 译 器 和 


19.1.1 ”语法 错误 


JavaScript 引擎 无 法 顺利 解释 特定 语法 (syntax) 时 ， 便 会 产生 语法 的 错误 〈syntax error) 。 请 
参看 如 下 示例 。 


【19-1-1-SyntaxErrorjs】 


【相关 说 明 】 


声明 初始 值 为 不 同 整数 值 的 变量 v01 与 v02。 


声明 初始 值 为 0 的 变量 result。 


在 此 语句 中 , 调用 内 置 函 数 eval0 时 , 传 入 了 代表 一 个 表达 式 的 数据 字符 串 'result =v01 -- v02;'。 
在 上 述 表 达 式 里 ， 被 视 为 操作 数 的 变量 名 称 v01 和 v02 之 间 ， 放 入 递减 运算 符 【--】， 是 不 被 支持 
的 。 所 以 ， 此 语句 被 执行 时 ， 会 发 生 SyntaxError 异常 错误 ， 而 跳 转 至 其 下 方 【catch(erD 】 语 名 的 
大 括号 里 。 


通过 try 语句 ， 可 使 得 其 大 括号 里 的 各 个 子 语句 ， 例 如 【eval(result = v01 -- v02 :) ;】， 一 旦 被 
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监听 到 任何 异常 错误 时 ， 其 下 方 catch(erD 语 名 之 大 括号 里 的 源 代码 ， 就 会 被 执行 。 


catch (err) 
{ 


with (console) 
此 语法 简化 了 【conole.log(err)】”， 成 为 下 方 大 括 号 里 的 【log(ern)】。 
{ 
log(lerr) ; 


通过 内 含 错 误 信息 (例如 【SyntaxError: Unexpected identifier】) 相关 数据 的 参数 err， 可 得 知 
究竟 发 生 了 什么 异常 错误 。 请 留意 ， 调 用 【console.log(err)】”， 虽 然 可 返回 参数 err 的 数据 信息 ; 但 
是 ， 参 数 err 的 数据 类 型 ， 并 非 string (字符 串 〉。 


log(''); 


log(typeof err) ; 
1og(err instanceof SyntaxError) ; 


因为 【typeoferr】 返 回 了 字符 串 'object， 再 加 上 【err instanceof SyntaxError】 返 回 了 布尔 值 true 
的 缘故 ， 可 得 知 参数 err 的 数据 类 型 ， 是 SyntaxError 对 象 〈object) 实例 。 


lo0g('') ; 


log(lerr.name) ; 
err.name 当前 返回 了 字符 串 'SyntaxError 。 


log(err.message) ; 


err.message 当前 返回 了 字符 串 'Unexpected identifier 。 
log(lerr.stack) ; 
err.stack 当前 返回 了 'SyntaxError: Unexpected identifier'。 


} 
} 


在 上 述 try 语句 的 大 括号 里 ， 一 旦 被 监听 到 发 生 任何 异常 错误 时 ， 其 【catch(err)】 语 句 的 大 括 
号 里 的 源 代码 ， 就 会 被 执行 。 在 其 小 插 号 里 的 err， 可 被 视 为 内 含 特定 异常 错误 相关 数据 的 参数 。 


19.1.2 ”数据 类 型 错误 


JavaScript 引擎 无 法 顺利 转换 特定 操作 数 (operand) 的 数据 类 型 (data type) 时 ， 便 会 产生 数 
据 类 型 的 错误 〈data type error) 。 请 参看 如 下 示例 。 
【19-1-2-TypeErrorjs]】 


let v01 = 100, v02 = 230 ; 
let result = 0 3 
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【相关 说 明 】 


声明 初始 值 为 不 同 整数 值 的 变量 v01 与 v02。 


声明 初始 值 为 0 的 变量 result。 


因为 变量 v01 当前 的 数据 是 数值 ， 并 不 支持 函数 replace0， 所 以 上 述 语句 被 执行 时 ， 会 发 生 
TypeError 异常 错误 ， 进 而 使 得 其 下 方 【catch(ern)】 语 句 的 大 括号 里 的 源 代码 ， 被 执行 。 


一 旦 上 一 个 语句 【result = v01.replace('0','1") ;】 发 生 了 异常 错误 ， 则 这 个 语句 就 不 会 被 执行 了 。 


通过 上 述 try 语句 ， 可 使 得 其 大 括号 里 的 各 个 子 语句 ， 例 如 【result = v01l.replace('0', '1") ;】， 
一 旦 被 监听 到 发 生 任何 异常 错误 时 ， 其 下 方 【catch(err)】 语 句 的 大 括号 里 的 源 代码 ， 就 会 被 执行 。 


此 语法 简化 了 【conole.log(err)】， 成 为 下 方 大 括 号 里 的 【log(ern)】。 
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log(err) ; 
通过 内 含 错误 信息 (例如 【TypeError: v01.replace is not a function 】) 相关 数据 的 参数 err， 可 
得 知 究 竞 发生 了 什么 异常 错误 。 请 留意 , 调用 【console.log(err)】, 虽然 可 返回 参数 err 的 数据 信息 ; 
但 是 ， 参 数 err 的 数据 类 型 ， 并 非 string (字符 串 ) 。 


log(''); 


log(typeof err) ; 
log(err instanceof TypeError) ; 


【typeof err】 返 回 了 字符 串 'object， 再 加 上 【err instanceof TypeError】 返 回 了 布尔 值 tue， 可 
得 知 参数 err 的 数据 类 型 是 TypeError 对 象 (object) 实例 。 


sj 


log(err.name) 7 


errname 当前 返回 了 字符 串 'TypeError'。 


log(lerr.message) ; 


err.message 当前 返回 了 代表 错误 信息 的 字符 串 'v01.replace is not a function'。 


log(lerr.stack) ; 


err.stack 当前 返回 了 代表 更 完整 的 错误 信息 的 字符 串 'TypeError: v01.replace is not a function'。 


} 
} 


在 上 述 try 语句 的 大 括号 里 ,一 旦 被 监听 到 发 生 任何 异常 错误 时 ，【catch(err)】 语 句 的 大 括号 
里 的 源 代码 ， 就 会 被 执行 。 在 其 小 括号 里 的 err， 可 被 视 为 内 含 特定 异常 错误 相关 数据 的 参数 。 


19.1.3 ”评估 错误 


JavaScript 引擎 现今 只 能 通过 内 置 函数 【eval( 代 表 特 定语 句 的 字符 串 )】 或 者 语句 【throw new 
EvalError( 代 表 特 定 错误 信息 的 字符 串 ) ;】， 才 会 产生 评估 错误 (evaluation error) 。 请 参看 如 下 示 
例 。 


【19-1-3-EvalErrorjs】 


try 
{ 
throw new EvalError('Equation evaluation error occurs!') ; 
} 
catch (err) 
{ 
with (console) 
{ 
log(err) ; 
log('') ; 
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log(typeof err) ; 
logl(lerr instanceof EvalError) ; 
log('') ; 


log(err.name) ; 
log(err.message) ; 
log(err.stack) ; 
} 

} 


【相关 说 明 】 


try 
{ 


throw new EvalError('Equation evaluation error occurs!') ; 
此 语句 会 直接 产生 带 有 自 定义 错误 信息 的 字符 串 'Equation evaluation error occurs! 的 EvalError 
对 象 实例 ， 进 而 使 得 其 下 方 【catch(err)】 语 句 的 大 括号 里 的 源 代码 ， 间 接 被 执行 。 
} 


通过 上 述 try 语句 ， 可 使 得 其 大 括号 里 的 各 个 子 语句 ， 例 如 【throw new EvalError(Equation 
evaluation error occurs!) ;】， 一 旦 被 监听 到 发 生 任 何 异常 错误 时 ， 其 下 方 【catch(err)】 语 句 的 大 括 
号 里 的 源 代码 ， 就 会 被 执行 。 

catch (err) 

{ 


with (console) 
{ 


log(err) ; 


通过 内 含 错误 信息 (例如 【EvalError: Equation evaluation error occurs!】) 相关 数据 的 参数 err， 
可 得 知 究竟 发 生 了 什么 异常 错误 。 请 留意 ， 调 用 【console.log(err)】， 虽 然 可 返回 参数 err 的 数据 信 
息 ， 但 是 参数 err 的 数据 类 型 ， 并 非 string (字符 串 )。 


log(''); 


log(typeof err) ; 
log(err instanceof EvalError) ; 


【typeof err】 返 回 了 字符 串 'object， 再 加 上 【err instanceof EvalError】 返 回 了 布尔 值 tue， 可 
得 知 参数 err 的 数据 类 型 是 EvalError 对 象 (object) 实例 。 


log('') ; 


1log(err.name) ; 


互 


err.name 当前 返回 了 字符 串 'EvalError'。 


logl(err.message) ; 


err.message 当前 返回 了 代表 错误 信息 的 字符 串 'Equation evaluation error occurs!'。 


log(err.stack) ; 
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err.stack 当前 返回 了 代表 更 完整 的 错误 信息 的 字符 串 'EvalError: Equation evaluation error 


Occurs!'。 


在 上 述 try 语句 的 大 括号 里 ,一 旦 被 监听 到 发 生 任何 异常 错误 时 ，【catch(err)】 语 句 的 大 括号 
里 的 源 代码 ， 就 会 被 执行 。 在 其 小 括号 里 的 err， 可 被 视 为 内 含 特定 异常 错误 相关 数据 的 参数 。 


19.1.4 ”范围 错误 


JavaScript 引擎 评估 到 特定 数据 范围 (data range) 以 外 的 数据 时 , 便 会 产生 数据 范围 错误 (data 
range error) 。 请 参看 如 下 示例 。 


【19-1-4-RangeErrorjs】 


【相关 说 明 】 
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这 3 个 语句 分 别 声明 了 变量 value、list 与 result。 
try 


{ 


2 
// result = value.toFixed(101) ; 
result = value.toPrecision(101) ; 
A 
内 置 函数 toFixed() 或 toPrecision() 并 不 支持 被 传 入 代表 高 达 101 个 小 数位 的 整数 值 101。 所 以 
此 语句 被 执行 时 ， 会 发 生 RangeError 异常 错误 ， 进 而 使 得 其 下 方 【catch(err)】 语 句 的 大 括号 里 的 
源 代码 ， 间 接 被 执行 。 


list = new Array(-3) ; 
Array 对 象 的 构造 函数 Array0， 并 不 支持 被 传 入 负 整 数 -3。 所 以 此 语句 被 执行 时 ， 会 发 生 
RangeError 异常 错误 ， 进 而 使 得 其 下 方 【catch(err)】 语 句 的 大 插 号 里 的 源 代 码 ， 间 接 被 执行 。 
console.log(result) ; 
因为 前 面 的 语句 已 产生 了 异常 错误 ， 所 以 此 语句 就 不 会 被 执行 了 。 
} 
通过 上 述 try 语句 ， 可 使 得 大 括号 里 的 各 个 子 语句 ， 例 如 【list = new Array(-3) ;】， 一 旦 被 监 
听 到 发 生 任 何 异常 错误 时 ， 其 下 方 【catch(err)】 语 句 的 大 括号 里 的 源 代码 ， 就 会 间接 被 执行 。 


catch (err) 

{ 
with (console) 
{ 


log(lerr) ; 
通过 内 含 错误 信息 (例如 【RangeError: Invalid array length】) 相关 数据 的 参数 err， 可 得 知 究 
竞 发 生 了 什么 异常 错误 。 请 留意 ， 通 过 调用 【console.log(err)】”， 虽 然 可 返回 参数 err 的 数据 信息 ， 
但 是 参数 err 的 数据 类 型 ， 并 非 string (字符 串 )。 


log('') ; 


log(typeof err) ; 
log(err instanceof RangeError) ; 


【typeof err】 返 回 了 字符 串 'object， 再 加 上 【err instanceof RangeError】 返 回 了 布尔 值 true， 
可 得 知 参数 err 的 数据 类 型 是 RangeError 对 象 (object) 实例。 


log(''); 


log(err.name) ; 


errname 当前 返回 了 字符 串 'RangeError'。 


log(err.message) ; 
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err.message 当前 返回 了 代表 错误 信息 的 字符 串 'Invalid array length '。 


err.stack 当前 返回 了 代表 更 完整 的 错误 信息 的 字符 串 'RangeError: Invalid array length'。 


在 上 述 try 语句 的 大 括号 里 ,一 旦 被 监听 到 发 生 任何 异常 错误 时 ， 其 下 方 【catch(emr)】 语 句 的 
大 括号 里 的 源 代 码 ， 就 会 间接 被 执行 。 在 其 小 括号 里 的 err， 可 被 视 为 内 含 特定 异常 错误 相关 数据 
的 参数 。 


19.1.5 引用 错误 


尚未 被 声明 的 变量 名 称 ， 被 引用 时 ， 会 产生 引用 错误 reference error) 。 请 参看 如 下 示例 。 
【19-1-5-ReferenceErrorjs】 


【相关 说 明 】 


这 两 个 语句 声明 了 变量 v01、v02 与 result。 
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result = V01 + v03 ; 
v03 当前 尚未 被 声明 成 为 变量 ， 所 以 此 语句 被 执行 时 ， 会 发 生 ReferenceError 异常 错误 ， 使 得 
其 下 方 【catch(err) 】 语 名 的 大 括号 里 的 源 代码 ， 间 接 被 执行 。 
console.log (result) ; 
因为 前 面 的 语句 已 产生 了 异常 错误 ， 所 以 此 语句 就 不 会 被 执行 了 。 
} 
通过 上 述 try 语句 ， 可 使 得 其 大 括号 里 的 各 个 子 语句 ， 例 如 【result = v01 + v03 ;】, 一 旦 被 监 
听 到 发 生 任何 异常 错误 时 ， 其 下 方 【catch(err)】 语 句 的 大 括号 里 的 源 代码 ， 就 会 被 执行 。 


catch (err) 

{ 
with (console) 
{ 


log(lerr) ; 
通过 内 含 错误 信息 (例如 【ReferenceError: v03 is not defined】) 相关 数据 的 参数 err， 可 得 知 
究竟 发 生 了 什么 异常 错误 。 请 留意 , 通过 调用 【console.log(err)】, 虽然 可 返回 参数 err 的 数据 信息 ， 
但 是 参数 err 的 数据 类 型 ， 并 非 string (字符 串 )。 


log(''); 


log(typeof err) ; 
log(err instanceof ReferenceError) ; 


了 布尔 值 true， 


【typeof err】 返回 了 字符 串 'object'， 再 加 上 【err instanceof ReferenceError】 返 
可 得 知 参数 err 的 数据 类 型 是 ReferenceError 对 象 (object) 实例 。 


log(''); 


log(lerr.name) ; 


errname 当前 返回 了 字符 串 'ReferenceError'。 


log(lerr.message) ; 
err.message 当前 返回 了 代表 错误 信息 的 字符 串 'v03 is not defined'。 
log(lerr.stack) ; 
err.stack 当前 返回 了 代表 更 完整 的 错误 信息 的 字符 串 'ReferenceError: v03 is not defined'。 


} 


} 

在 上 述 try 语句 的 大 括号 里 ， 一 旦 被 监听 到 任何 异常 错误 时 ， 其 下 方 【catch(ernD 】 语 句 的 大 括 
号 里 的 源 代码 ， 就 会 间接 被 执行 。 在 其 小 括号 里 的 err， 可 被 视 为 内 含 特定 异常 错误 相关 数据 的 参 
数 。 
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19.1.6 ”网 址 在 编码 或 解码 上 的 错误 


JavaScript 引擎 无 法 顺利 对 特定 网 址 (URI / URL, uniform resource identifier / uniform resource 
locator) 进行 编码 (encode) 或 解码 (decode) 时， 便 会 产生 URI 错误 (URI Error) ， 引 申 为 网 址 
在 编码 或 解码 上 的 错误 。 请 参看 如 下 示例 。 

【19-1-6-URIError.js】 


try 
{ 
decodeURIComponent ('https://tw.dictionary.yahoo.com/dictionary? 
Pp=%E8%81%96%E8SAAS95%E7SAFSFF') ; 
} 
catch (err) 
{ 
with (console) 
{ 
log(lerr) ; 
log('') ; 


log(typeof err) ; 
1og(err instanceof URIError) ; 
log(''); 


log(err.name) ; 
log(lerr.message) ; 
log(lerr.stack) ; 
} 

} 


【相关 说 明 】 


try 
{ 
decodeURIComponent ('https://tw.dictionary.yahoo.com/dictionary? 
p=%E8%81%96%E8%AASIS%ETSAFSEFF') ; 

在 被 传 入 函数 decodeURIComponent() 的 参数 数据 字符 串 'https://tw.dictionary.yahoo.com/ 
dictionary?p=%E8%81%96%E8%AA%95%E7%AF%FF' 里 ， 其 中 【%E8%81%96%E8%AA%95%E7 
%AF%FF]】 的 部 分 ， 潜藏 着 URI 的 编码 错误 。 所以， 此 语句 被 执行 时 ,会 发 生 URIError 异常 错误 ， 
进而 使 得 其 下 方 【catch(err)】 语 句 的 大 插 号 里 的 源 代码 ， 间 接 被 执行 。 


通过 上 述 try 语句 ， 可 使 得 大 括号 里 的 各 个 子 语句 ， 例 如 【decodeURIComponent(https:/tw. 
dictionary. yahoo.com/dictionary?p=%E8%81%96%E8%AA%95%E7%AF%FF') ;:】， 一 旦 被 监听 到 发 
生 任 何 异 常 错 误 时 ， 其 下 方 【catch (err)】 语 句 的 大 括号 里 的 源 代码 ， 就 会 间接 被 执行 。 

catch (err) 

{ 


with (console) 
{ 
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log(err) ; 
通过 内 含 错误 信息 (例如 【URIError: URI malformed at decodeURIComponent (<anonymous>)】) 
相关 数据 的 参数 er， 可 得 知 究竟 发 生 了 什么 异常 错误 。 请 留意 ， 调 用 console.log(err)， 虽 然 可 返 加 
参数 err 的 数据 信息 ， 但 是 参数 err 的 数据 类 型 并 非 string (字符 串 ) 。 


log(''); 


log(typeof err) ; 
logl(err instanceof URIError) ; 


【typeof err】 返 回 了 字符 串 'object'， 再 加 上 【err instanceof URIError】 返 回 了 布尔 值 tue， 可 
得 知 参数 err 的 数据 类 型 是 URIError 对 象 (object) 实例 。 


1og(' 7 ) ; 


Ee] 


log(err.name) ; 
了 字符 串 'URIError 。 
log(err.message) ; 
err.message 当前 返回 了 代表 错误 信息 的 字符 串 'URI malformed'。 
log(err.stack) ; 
err.stack 当前 返回 了 代表 更 完整 的 错误 信息 的 字符 串 'URIError: URI malformed at 


decodeURIComponent (<anonymous>)'。 


err.name 当前 返 [E 


} 


} 

在 上 述 try 语句 的 大 括号 里 ， 一 旦 被 监听 到 任何 异常 错误 时 ， 其 下 方 【catch(ernD 】 语 句 的 大 括 
号 里 的 源 代码 ， 就 会 间接 被 执行 。 在 其 小 括号 里 的 err， 可 被 视 为 内 含 特定 异常 错误 相关 数据 的 参 
数 。 


19.1.7 ”逻辑 错误 
JavaScript 引擎 无 法 察觉 ， 编 程 人 员 思 考 得 不 够 周全 而 导致 的 逻辑 错误 (logical error) 。 请 参 


看 如 下 示例 。 


【19-1-7-logical-errors.js】 


let num list = Array.from(new Array(11), (value, index) => parseInt (100 * Math.random())) ; 
let result = null ; 
result = Math.min(... num list) ; 


console.log (num list) ; 
console.log(result) ; 
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// message with logical error 
console.1log(`The maximum value is ${result}.*) 
console.10g('') ; 


1// 
let radius = 55 ; 


// result with logical error 
result = (3 / 4 * Math.PI * radius ** 3).toFixed(3) ; 


console.log(‘The sphere volume of radius ${radius} is ${result}’) ; 

【相关 说 明 】 

let num list = Array.from(new Array(11), (value, index) => parseInt (100 * Math.random())) ; 

此 语句 声明 了 变量 num_list, 其 初始 数据 为 内 含 11 个 介 于 0~ 100 之 间 的 随机 整数 值 的 数组 实 
例 ， 例 如 [28, 84, 45, 83, 24, 45, 84, 45, 41, 55, 66]。 

let result = null ; 

声明 初始 数据 为 空 值 (null) 的 变量 result。 

result = Math.min(... num list) ; 

Math.min(... num_list) 会 返回 【在 变量 num_list 的 数组 实例 中 ， 其 最 小 】 的 整数 值 ， 例 如 24。 


console.log(num list) ; 


显示 出 变量 num_list 的 数组 实例 ， 例 如 [28, 84, 45, 83, 24, 45, 84, 45, 41, 55, 66]。 
console.log(result) ; 
显示 出 变量 num_list 数组 实例 中 的 最 小 整数 值 ， 例 如 24。 


// message with logical error 
console.log(`The maximum value is $fresult}.) ; 


此 语句 显示 出 类 似 【The maximum value is 24.】 的 信息 ， 透 露出 【在 变量 num_list 的 数组 实例 
中 ， 其 最 大 】 的 整数 值 为 24。 

然而 ， 在 变量 num_list 的 数组 实例 〈 例 如 [28, 84, 45, 83, 24, 45, 84, 45, 41, 55, 66]) 中 ， 其 最 大 
的 整数 值 并 不 是 24， 而 是 84。 这 种 显示 出 不 正确 信息 的 错误 ， 并 非 语法 上 的 错误 ， 而 是 编程 人 员 
因为 思考 不 周全 所 造成 的 逻辑 错误 。 


console.log('') ; 


let radius = 55 ; 
声明 初始 值 为 55 的 变量 radius。 


// result with logical error 
result = (3 / 4 * Math.PI * radius ** 3).toFixed(3) ; 


在 球体 积 公式 【3 / 4* Math.PI* radius ** 3】 中 ， 其 子 表 达 式 【3 /4】 存 在 雇 误 ， 其 正确 的 应 
该 是 【4 /13】。 这 种 不 正确 结果 值 的 错误 ， 也 是 编程 人 员 思 考 不 周全 所 造成 的 逻辑 错误 。 
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console.log(`The sphere volume of radius ${radius} is S${result}*) ; 


此 语句 显示 出 类 似 【The sphere volume of radius 55 is 392011.858】 的 信息 。 
mre ls» | 
19.2 ”处 置 特定 异常 错误 


在 特定 应 用 程序 中 ， 难 免 会 潜藏 着 未 被 发 觉 的 错误 ， 进 而 导致 用 户 在 操作 时 ， 看 见 无 法 理解 
的 相关 错误 信息 。 
欲 转换 原本 无 法 被 理解 的 相关 错误 信息 ， 成 为 用 户 可 以 理解 或 不 会 看 见 的 错误 信息 ， 编 程 人 
员 必 须 在 其 源 代码 中 ， 撰 写 错误 处 理 的 相关 部 分 。 请 参看 如 下 示例 。 
【19-2-^-try-catch-finally.js】 
try 
{ 
//throw new URIError ("Defined error message here...") ; 
throw "Logical error occurs." ; 
} 
catch (err) 
{ 
console.log (err.name) ; 
console.log (err.message) ; 
console.1log (err.stack) ; 
console.10og('') ; 


console.1og(` Special: ${err}.) ; 
console.1og('') ; 
} 
finally 
{ 
console.1og('Message after exception handling.') ; 


} 
【相关 说 明 】 
请 参看 本 节 下 面 的 相关 说 明 。 


19.2.1 试验 与 捕获 特定 异常 错误 


在 JavaScript 语言 中 ， 可 通过 【try { ..….} catch { .…} finally { .…}】 的 语法 达成 试验 (try) 与 捕获 
(catch) 特定 异常 错误 ， 最 后 〈finally) 综合 处 置 (handling) 的 机 制 。 

try 

{ 


| 
} 


通过 try 语句 ， 可 使 得 其 大 括号 里 的 各 个 子 语句 ， 一 旦 被 监听 到 发 生 任何 异常 错误 时 ， 其 下 方 
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【catch(err)】 语 句 的 大 括号 里 的 源 代码 ， 就 会 间接 被 执行 。 
catch (err) 


{ 


console.1log(err.name) ; 


此 语句 会 显示 出 内 置 的 异常 错误 的 对 象 名 称 ， 例 如 SyntaxEror( 语 法 错误 ) 、TypeError (类 
型 错误 ) 、EvalError (评估 错误 ) 、 ene (范围 错误 ) 、ReferenceError (参考 错误 ) 、URIError 
(URI 错误 ) 等 。 


console.1og (err .message) ; 
console.1og (err.stack) ; 


errname、err.message、err.stack 在 此 均 返 回 原始 常量 undefined (未 被 定义 ) 。 


console.1log('') ; 
console.log (“Special: S${err}’); 
显示 出 【Special: Logical error occurs.】 的 信息 。 
console.1log('') ; 
} 


在 前 面 的 try 语句 的 大 括号 里 ， 一 旦 被 监听 到 任何 异常 错误 时 ， 上 述 【catch(em)】 语 句 的 大 括 
号 里 的 源 代码 ， 就 会 间接 被 执行 。 在 其 小 括号 里 的 err， 可 被 视 为 内 含 特定 异常 错误 相关 数据 的 参 
数 。 


finally 
{ 


console.1og('Message after exception handling.') ; 
此 语句 显示 出 【Message after exception handling.】 的 信息 。 
} 


无 论 在 前 面 的 try 语句 的 大 括号 里 , 其 源 代码 有 无 异常 错误 后续 在 上 述 finally 语句 的 大 括号 
里 的 源 代码 ， 都 会 间接 被 执行 。 


19.2.2” 抛 出 自 定义 的 异常 错误 


通过 关键 字 throw 开头 的 语句 ， 可 使 得 JavaScript 引擎 抛 出 (throw) 特定 自 定义 的 异常 错误 
(exception error) 的 对 象 实例 (object instance ) 。 请 参看 示例 的 如 下 片段 。 


try 
{ 


//throw new URIError ("Defined error message here...") ; 
throw "Logical error occurs." ; 
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此 语句 会 直接 产生 带 有 自 定义 错误 信息 'Logical error occurs.' 的 异常 错误 的 对 象 实例 , 进而 使 得 
其 下 方 【catch(erD)】 语 句 的 大 括号 里 的 源 代 码 ， 间 接 被 执行 。 


19.3 调试 机 制 


JavaScript 引擎 支持 如 下 两 种 调试 机 制 : 


e@ 通过 带 有 字符 串 字 面 量 的 语 铅 【"use strict" ;】〗， 启 动 JavaScript 引擎 的 严格 模式 (strict mode )。 
@ 通过 语句 【debugger;】 在 特定 源 代 码 的 位 置 上 ， 设 置 调试 用 途 的 断 点 (breakpoint )。 


19.3.1 严格 模式 


JavaScript 引擎 处 于 严格 模式 的 情况 下 ， 对 于 源 代码 的 语法 的 要 求 ， 是 相当 严格 (strict) 的 ! 
请 参看 如 下 示例 。 
【19-3-1-strict-mode.js】 
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【相关 说 明 】 


此 语句 启动 了 严格 模式 ， 使 得 JavaScript 引擎 以 特别 高 的 标准 ， 严 格 检视 源 代码 的 语法 。 


在 严格 模式 中 ，v03 被 访问 之 前 ， 尚 未 被 定义 成 为 变量 ， 所 以 语句 【v03 = 600 ;】 会 产生 
ReferenceError 异常 错误 。 


通过 上 述 try 语句 ， 可 使 得 其 大 括号 里 的 各 个 子 语句 ,例如 【v03 = 600 ;】， 一 旦 被 监听 到 发 
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生 任 何 异 常 错误 时 ， 其 下 方 的 【catch(err)】 语 句 的 大 括号 里 的 源 代码 ， 就 会 间接 被 执行 。 

catch (err) 

{ 

console.log(err) ; 

此 语句 显示 出 【ReferenceError: v03 is not defined】 的 信息 。 

} 

在 上 述 try 语句 的 大 插 号 里 ,一旦 被 监听 到 任何 异常 错误 时 ，【catch(err)】 语 句 的 大 括号 里 的 
源 代码 ， 就 会 被 执行 。 在 其 小 括号 里 的 er， 可 被 视 为 内 含 特定 异常 错误 相关 数据 的 参数 。 

function func01() 


{ 
radius = 10 ; 


return 4 * Math.PI * radius ** 2 ? 
} 


上 述 语法 定义 了 函数 fanc010。 


try 
{ 


func01() ; 
于 严格 模式 中 , 在 函数 func010 被 调用 之 后 , 及 其 内 部 的 语句 【radius = 10 ;】 被 执行 之 前 , radius 
尚未 被 定义 成 为 变量 ， 所 以 【radius = 10 ;】 被 执行 时 ， 就 会 产生 ReferenceError 异常 
} 


catch (err) 
{ 


console.log (err) ; 


此 语句 显示 出 【ReferenceError: radius is not defined】 的 信息 。 


try 


evall('\ 
with (Math)\ 
{\ 
console.10g (PI) ;\ 
2 
在 严格 模式 中 ， 并 不 能 通过 with 语句 ， 简 化 特定 对 象 实例 的 成 员 的 访问 语法 ， 否 则 会 产生 
SyntaxError 异常 错误 。 
有 些 SyntaxError 异常 错误 的 发 生 ， 无 法 被 捕获 ， 导 致 其 下 方 【catch (err)】 语 句 的 大 括号 里 的 
源 代码 , 并 不 会 被 执行 。 所 以 在 此 , 必须 额外 将 其 原始 语法 , 以 字符 串 的 形式 , 传 入 内 置 函 数 eval()， 
才能 顺利 间接 进行 调试 。 
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} 
catch (err) 
{ 


console.log(err) ; 


此 语句 显示 出 【SyntaxError: Strict mode code may not include a with statement】 的 信息 。 


let num01 = 0 : 
声明 初始 值 为 0 的 变量 num01 。 
eval('num01l = 0377 ;') ; 
在 严格 模式 下 ， 不 能 通过 【0】 加 上 【八进制 】 数 码 的 旧 语 法 ， 来 表示 八进制 数值 ， 否 则 会 
生 SyntaxError 异常 错误 。 
有 些 SyntaxError 异常 错误 的 发 生 ， 无 法 被 捕获 ， 导 致 其 下 方 【cath(err)】 语 名 的 大 括号 里 的 源 
代码 。 不 会 被 执行 。 所 以 在 此 ， 必 须 额 外 将 其 原始 语法 ， 以 字符 串 的 形式 ， 传 入 内 署 函 数 eval0， 
才能 顺利 间接 进行 调试 。 


} 
catch (err) 
{ 


console.log(err) ; 


此 语句 显示 出 【SyntaxError: Octal literals are not allowed in strict mode.】 的 信息 。 


try 


let person = {name: 'Jasper', gender: 'male', age: '33'}; 
声明 初始 数据 为 对 象 实例 的 变量 person。 
eval('delete person ;7') ; 

在 严格 模式 下 ， 不 能 通过 关键 字 delete 的 语句 ， 来 删除 特定 对 象 实例 ， 例 如 上 述 变量 person 
的 对 象 实例 。 

有 些 SyntaxeError 异常 错误 的 发 生 ， 无 法 被 捕获 ， 使 得 其 下 方 【catch (err)】 语 句 的 大 括号 里 
的 源 代码 , 不 会 被 执行 。 所 以 在 此 , 必须 额外 将 其 原始 语法 , 以 字符 串 的 形式 , 传 入 内 置 函 数 eval()， 
才能 顺利 间接 进行 调试 。 

} 


catch (err) 
{ 


console.log (err) ; 
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此 语句 显示 出 【SyntaxError: Delete of an unqualified identifier in strict mode.】 的 信息 。 


19.3.2” 源 代码 的 断 点 设置 和 逐 句 执行 


在 JavaScript 源 代码 里 ， 可 安排 多 个 调试 用 途 的 断 点 (breakpoint) 的 语句 【debugger ;】， 上 
JavaScript 引擎 执行 到 特定 断 点 时 ， 可 暂停 并 等 待 编 程 人 员 进 一 步 的 调试 动作 ， 比 如 逐 句 执行 、 别 
至 下 一 个 断 点 等 。 请 参看 如 下 示例 。 


【19-3-2-debugging-mechanism.js】 


let radius = 10, height = 15 ; 
let result = 0， 


result = Math.PI * (radius ** 2) * height ; 


console.log(result) ; 
console.1o0g('') ; 


debugger ; 
result = 2 * Math.PI * radius ** 2 + 2 * Math.PI * radius * height ; 


console.log(result) ; 
console.1log('') ; 


debugger ; 
result = 4 / 3 * Math.PI * radius ** 3 7? 


console.log(result) ; 
console.1log('') ; 


debugger ; 
result = 4 * Math.PI * radius ** 2 3 


console.log (result) ; 


【相关 说 明 】 


let radius = 10, height = 15 ; 
let result = 0， 


这 两 个 语句 分 别 声 明了 初始 值 为 不 同 整 数值 的 变量 radius、height 与 result。 


result = Math.PI * (radius ** 2) * height ; 


此 语句 将 半径 为 10、 高 度 为 15 的 圆柱 体积 4712.38898038469， 赋 给 了 变量 result。 


console.log(result) ; 


此 语句 显示 出 圆柱 体积 4712.38898038469 的 信息 。 


console.10g('') ; 
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debugger ; 


此 语句 除了 会 间接 启动 浏览 器 的 调试 工具 【Sources】 面 板 之 外 ， 也 会 使 得 JavaScript 引擎 ， 执 
行 源 代码 的 动作 ， 暂 停 在 此 语句 上 ， 并 等 待 调试 人 员 后 续 的 手动 操作 ， 例 如 : 
恢复 脚本 执行 (resume script execution) 
跳 转 至 下 一 个 函数 的 调用 完成 (step over next function call ) 
进入 下 一 个 函数 的 调用 开始 (step into next function call ) 
跳出 至 当前 函数 的 调用 完成 (step out of current function ) 


result = 2 * Math.PI * radius ** 2 + 2 * Math.PI * radius * height ; 

此 语句 将 半径 为 10、 高 度 为 15 的 圆柱 体 表面 积 1370.7963267948967， 赋 给 了 变量 result。 
console.log(result) ; 

此 语句 显示 出 圆柱 体 表面 积 1570.7963267948967 的 信息 。 

console.10g('') ; 


debugger ; 

若 调试 人 员 手 动 进行 【恢复 脚本 执行 】， 则 JavaScript 引擎 会 从 上 一 个 【debugger ;】 的 位 置 ， 
往 下 执行 ， 并 暂停 于 当前 语句 上 。 

resdlt = A /3.% Hat RE radivg ee 3s 

此 语句 将 半径 为 10、 高 度 为 15 的 球体 积 4188.790204786391， 赋 给 了 变量 result。 


console.log(result) ; 


此 语句 显示 出 球体 积 4188.790204786391 的 信息 。 

console.1og('') ; 

debugger ; 

车 调试 人 员 手 动 进行 【恢复 脚本 执行 】， 则 JavaScript 引擎 会 从 上 一 个 【debugger ;】 的 位 置 ， 
往 下 执行 ， 并 和 暂停 于 当前 语句 上 。 

result = 4 * Math.PI * radius ** 2 7 

此 语句 将 半径 为 10、 高 度 为 15 的 球体 表面 积 1256.6370614359173， 赋 给 变量 result。 

console.log(result) ; 


此 语句 显示 出 球体 积 1256.6370614359173 的 信息 。 


19.4 练 习 题 


1. 已 知 如 下 JavaScript 源 代码 片段 : 


let num01 = 155, num02 = 250 ; 
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let result ; 


result = vO1 -- v02 ; 

试 描述 如 上 源 代码 片段 被 执行 时 ， 会 发 生 什么 种 类 的 异常 错误 。 
2. 已 知 如 下 JavaScript 源 代码 片段 

let num03 = 10, num04 = 30; 


let result ; 


result = num03++ + ++num04 ; 
试 描述 如 上 源 代码 片段 被 执行 时 ， 会 发 生 什 么 种 类 的 异常 错误 。 
3. 已 知 如 下 JavaScript 源 代码 语句 : 


evall('let num05 = 123.456. ;7') ; 


试 描述 如 上 源 代码 片段 被 执行 时 ， 会 发 生 什 么 种 类 的 异常 错误 
4. 已 知 如 下 JavaScript 源 代码 语句 : 


evall('let num06 = 789 ;7') ; 
evall('let num07 = num06 * num08 ;7') ; 


试 描述 如 上 源 代码 片段 被 执行 时 ， 会 发 生 什么 种 类 的 异常 错误 。 
5. 编写 JavaScript 源 代码 ， 以 完成 如 下 任务 : 
(1) 声明 数值 可 为 整数 1、2 与 3 的 变量 error_code。 
(2) 根据 变量 error_code 的 如 下 数值 ， 使 得 JavaScript 引擎 主动 抛 出 对 应 的 异常 错误 的 对 象 
实例 : 
@ 其 数值 为 1 时 ， 抛 出 自 定 义 异 常 错误 的 类 InputError 的 对 象 实例 。 
@ 其 数值 为 2 时 ， 抛 出 自 定义 异常 错误 的 类 DivisionError 的 对 象 实例 。 
日 其 数值 为 3 时 ， 抛 出 自 定 义 异 常 错误 的 类 TimeoutError 的 对 象 实例 。 


(3) 捕捉 以 上 3 种 自 定义 异常 错误 的 类 的 对 象 实例 ， 并 显示 对 应 的 特定 信息 。 


第 20 章 
数据 的 验证 与 传输 


在 网 页 上 的 数据 验证 (data validation) 机 制 ， 可 分 为 客户 端 〈client side) 和 服务 器 端 (server 
side) 的 版 本 ， 以 确保 用 户 输入 的 数据 是 可 用 的 。 

待 客户 端的 数据 ， 以 客户 端的 验证 机 制 ， 确 认为 可 用 的 之 后 ， 才 可 通过 特定 形式 的 数据 传输 
机 制 ， 传 递 至 服务 器 端 ， 并 以 服务 器 端的 验证 机 制 ， 进 行 最 后 的 核实 。 


20.1 HTML 表单 的 内 置 验证 


于 HTML 语言 中 ， 可 通过 如 下 各 个 属性 ， 来 达成 内 置 在 表单 中 的 各 数据 的 验证 机 制 : 
required ( 必 填 的 ) 

pattern (模式 ) 

min (最 小 值 ) 

max (最 大 值 ) 

maxLength (字符 个 数 的 上 限 ) 

type (类 型 ) 


20.1.1 必 填 验证 


若 在 特定 网 页 的 HTML 源 代 码 中 ， 已 知 存在 如 下 代表 文本 字段 〈text field) 的 【属性 id 的 数 
据 为 username'】 的 input 元 素 实例 : 


<input type="text"id="username" name="username" placeholder="username" size="16"> 


欲 让 上 述 input 元 素 实 例 的 数据 文本 ， 具 有 必 备 〈required) 的 特征 ， 其 方式 大 致 如 下 之 一 : 
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® ”在 对 应 的 HTML 源 代码 语法 里 , 加 上 1 个 空格 字符 , 以 及 无 须 带 有 任何 数据 的 属性 required: 


e@ 在 后 续 的 script 元 素 实 例 中 ， 加 上 【username.required =true ;】 的 JavaScript 语句 : 


对 于 相关 的 综合 运用 ， 请 参看 如 下 示例 。 


【20-1-1-required-validations.html}】 
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search.required = true ; 
</script> 
</html> 
【相关 说 明 】 


<input type="text" id="username" name="username" Placeholder="username" size="16" required> 
<input type="password" id="password" name="password" placeholder="password" size="16" 
required> 


这 两 个 HTML 语法 定义 了 属性 id 的 数据 分 别 为 username' 和 'password' 的 input 元 素 实例 ， 而 且 
均 带 有 属性 required， 意 味 着 其 数据 文本 是 必 备 (required) 的 。 换 句 话 说， 在 用 户 按 下 可 启动 提交 
Csubmit) 机 制 的 Login 按钮 之 前 ， 这 两 个 input 元 素 实例 的 数据 是 是 必须 被 填写 的 。 
<button type="submit">Login</button> 
这 个 button 元 素 实例 在 网 页 上 ， 呈 现 为 带 有 文本 【Login】 的 按钮 。 此 外 ， 因 为 其 属性 type 是 
submit， 所 以 同时 具备 可 启动 提交 (submit) 机制 的 特征 。 
<button type="reset">Reset</button> 
</form> 


</body> 
<script> 


select01.required = true ; 

此 语句 将 布尔 值 tue， 赋 给 了 属性 id 的 数据 为 'select01' 的 select 元 素 实例 的 属性 required。 在 
用 户 按 下 可 启动 提交 (submit) 机 制 的 Login 按钮 之 前 ， 属 性 id 的 数据 为 'select01' 的 select 元 素 实 
例 的 数据 是 必 备 的 ， 引 申 为 必须 被 选 定 的 。 

search.required = true ; 

此 语句 将 布尔 值 true 赋 给 ， 属 性 id 的 数据 为 'search' 的 input 元 素 实 例 的 属性 required。 在 用 户 
按 下 可 启动 提交 机 制 的 Login 按钮 之 前 , 属性 id 的 数据 为 'search' 的 input 元 素 实例 的 数据 是 必 备 的 ， 
引申 为 必须 被 填写 的 。 

可 启动 提交 机 制 的 Login 按钮 被 按 下 时 , 若 缺 少 任何 必 备 的 元 素 实例 的 数据 , 则 浏览 器 会 在 网 
页 上 ， 其 第 1 个 缺少 数据 的 元 素 实 例 的 附近 ， 呈 现 出 对 应 的 提示 信息 ， 并 暂停 提交 的 动作 。 


20.1.2 ”字符 个 数 和 数值 范围 的 验证 


在 HTML 语言 中 ， 验 证 特定 文本 字段 (text field) 里 的 字符 个 数 (character amount) 和 数值 范 
围 (number-value range) ， 主 要 可 通过 如 下 属性 来 达成 : 
type (类 型 ) 
maxLength (字符 个 数 的 上 限 ) 
min (最 小 值 ) 
max (最 大 值 ) 


对 于 相关 的 综合 运用 ， 请 参看 如 下 示例 。 
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</script> 
</html> 


【相关 说 明 】 


<script> 


username.maxLength = 12; 
语句 使 得 属性 id 的 数据 为 usemame' 的 input 元 素 实 例 ， 最 多 只 可 被 填 入 12 个 字符 的 文本 。 
age.min = 5 7 
此 语句 使 得 属性 id 的 数据 为 'age' 的 input 元 素 实例 ， 必 须 被 填 入 至 少 为 5 的 整数 值 。 
age.max = 150 ; 
语句 使 得 属性 id 的 数据 为 'age' 的 input 元 素 实例 ， 必 须 被 填 入 最 多 为 150 的 整数 值 。 
search.required = true ; 
此 语句 将 布尔 值 rue， 赋 给 了 属性 id 的 数据 为 'search' 的 input 元 素 实例 的 属性 required。 在 用 
户 按 下 可 启动 提交 机 制 的 Login 按钮 之 前 ， 属 性 id 的 数据 为 'search' 的 input 元 素 实例 的 数据 是 必 备 
的 ， 引 申 为 必须 被 填写 的 。 
可 启动 提交 机 制 的 Login 按钮 被 按 下 时 , 若 缺 少 任何 必 备 或 者 格式 正确 的 元 素 实例 的 数据 ,， 则 
浏览 器 会 在 网 页 上 ， 其 第 1 个 缺少 【 必 备 或 者 格式 正确 】 的 数据 的 元 素 实例 附近 ， 呈 现 出 对 应 的 提 
示 信 息 ， 并 暂停 提交 的 动作 。 


i 


20.2 自 定 义 的 验证 


在 HTML 语言 中 , 特定 文本 字段 中 的 模式 验证 (pattern validation ) ,主要 可 通过 属性 type( 数 
据 类 型 ) 和 pattem 模式 ) 来 达成 。 请 参看 如 下 示例 。 
【20-2-^-validation-implementations-by-JavaScript.html]】 


<!DOCTYPE html> 
<html> 
<head> 
<title>validation implementations by JavaScript</title> 
<style> 
input, button, select 
{ 
/*font-size: 1.2em ;*/ 
margin: 5Px 7 


} 


h4, p 
{ 
margin: 0 ; 
} 
</style> 
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console.10g('') ; 


for (ref of refs) 
{ 
if (ref.tagName == 'BUTTON') continue ; 
else if (! ref.checkValidity()) 
{ 
ref.style.border = '2px IndianRed solid' ; 


for (let prop in ref.validity) 
{ 
if (ref.validity[prop]) 
{ 
console.1og(`Error message: (${prop}) ${ref.validationMessage} ) ; 
// ref.setCustomValidity('Please fill the text field or correct the format. Orz'); 
} 
} 
} 
else ref.style.border = '2px YellowGreen solid' ; 
} 
LR 
</script> 
</html> 


【相关 说 明 】 
请 参看 本 节 下 面 的 相关 说 明 。 


20.2.1 文本 字段 的 模式 验证 


在 HTML 语言 中 ,文本 字段 的 模式 验证 ， 必 须 借助 属性 pattem 和 其 代表 【正则 表达 式 字 面 量 
( regular-expression literal ) 】 的 数据 ， 才 能 达成 。 例 如 ， 加 入 属性 pattem 的 语法 
【pattermm="12\d-\d{4}-\Wd{4}"】， 至 如 下 input 元 素 实例 里 : 


<input type="text" id="phone_no" name="phone_no" size="28" placeholder="(phone number) 
12X-XXXX-XXXX"> 


进而 成 为 如 下 语句 : 

<input type="text" id="phone_no" name="phone_no" size="28" placeholder="(phone number) 
12X-XXXX-XXXX"pattern="12\d-\d{4}-\d{4}"> 

对 于 文本 字段 的 模式 验证 的 综合 运用 ， 请 继续 参看 下 面 的 相关 说 明 。 
【相关 说 明 】 


<input type="text" id="phone no" name="phone no" size="28" placeholder=" (Phone number) 
12X-XXXX-XXXX" pattern="12\\d-\\a{4}-\\d{4}"> 


在 这 个 input 元 素 实例 中 , 借助 属性 pattem 和 其 代表 【正则 表达 式 字 面 量 "12Wd-\d{4}-\d{4}"】 
的 数据 ， 来 验证 其 文本 字段 中 的 电话 号 码 的 格式 。 
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<p></p> 


<input type="text" id="email addr" name="email addr" size="24" placeholder="email address.." 
Pattern="^\\wt(\\.\\w+) ?2@\\w+t (\\.\\w+) {1,3}$"> 


在 这 个 input 元 素 实 例 中 ， 借助 属 性 pattern 和 其 代表 【正则 表达 式 字 面 量 
"ANw+CNw+)2G@Nw+CANw+){11L3}13"】 的 数据 ， 来 验证 其 文本 字段 中 的 电子 邮件 地 址 的 格式 。 


20.2.2 ” JavaScript 源 代 码 实现 的 验证 


原本 通过 HTML 语法 而 实现 的 验证 机 制 ， 均 可 被 改写 成 为 JavaScript 语法 的 版 本 。 举 例 来 说 ， 
已 知 如 下 HTML 的 语法 : 
<input type="text" id="phone_no" name="phone_no" size="28" placeholder="(phone number) 
12X-XXXX-XXXX" pattern="12\d-\d{4}-\d{4}"> 


如 上 HTML 语法 ， 可 被 改写 成 为 如 下 HTML 和 JavaScript 语 法 互相 搭配 的 版 本 : 


<input type="text" id="phone_no" name="phone_no" size="28" placeholder="(phone number) 
12X-XXXX-XXXX"> 
| 
<script> 
| 
phone_no.pattern = "12\d-\d{4}-\d{4}"; 
| 
</script> 
原本 在 HTML 语法 中 的 属性 pattem 和 其 代表 【正则 表达 式 字面 量 "12Wd-\d{4}-\d{4}"】 的 数 
据 ， 被 改写 成 为 【在 script 元 素 实例 中 ， 具 有 相同 效果 】 的 JavaScript 语法 。 对 于 JavaScript 源 代 
码 实 现 的 验证 ， 请 继续 参看 下 面 的 相关 说 明 。 


【相关 说 明 】 


<input type="text" id="phone no" name="phone no" size="28" placeholder=" (phone number) 
12X-XXXX-XXXX"> 


在 这 个 HTML 语法 中 ,原本 存在 属性 pattem 和 其 代表 [正则 表达 式 字面 量 "12Wd-\d{4}-\d{4}"】 
的 数据 ， 当 前 则 被 改写 成 为 【在 script 元 素 实例 中 ， 具 有 相同 效果 】 的 JavaScript 语法 。 


<p></p> 


<input type="text" id="email addr" name="email addr" size="24" placeholder="email address.." 
pattern="^\\wt(\\.\\w+) ?0\\Ww+t(\\.\\wt) {1,3}$"> 


在 这 个 HTML 语法 中 ， 原 本 存在 属性 pattem 和 其 代表 【正则 表达 式 字 面 量 
"Ww+OWW+T?@Ww+QWNw+){1,3}$"】 的 数据 ， 当 前 则 被 改写 成 为 【在 script 元 素 实例 中 ， 有 具有 相 
同 效果 】 的 JavaScript 语法 。 
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<script> 


username.required = true ; 


语句 将 布尔 值 tue， 赋 给 了 属性 id 的 数据 为 "username' 的 input 元 素 实例 的 属 


性 required。 在 


用 户 按 下 可 启动 提交 机 制 的 Login 按钮 之 前 , 属性 id 的 数据 为 username' 的 input 元 素 实例 的 数据 是 


必 备 的 ， 引 申 为 必须 被 填写 的 。 


Username .maxLength = 12; 


password.required = true ; 


此 语句 将 布尔 值 tue， 赋 给 了 属性 id 的 数据 为 'password' 的 input 元 素 实例 的 属 


语句 使 得 属性 id 的 数据 为 usemame' 的 input 元 素 实 例 ， 最 多 只 可 被 填 入 12 个 字符 。 


性 required。 在 


用 户 按 下 可 启动 提交 机 制 的 Login 按钮 之 前 , 属性 id 的 数据 为 'password' 的 input 元 素 实例 的 数据 是 


必 备 的 ， 引 申 为 必须 被 填写 的 。 

age.min = 5 ; 
语句 使 得 属性 id 的 数据 为 'age' 的 input 元 素 实例 ， 被 填 入 的 整数 值 至 少 为 5。 
age.max = 150 ; 
语句 使 得 属性 id 的 数据 为 'age' 的 input 元 素 实例 ， 被 填 入 的 整数 值 最 多 为 15 
search.required = true ; 


此 语句 将 布尔 值 tue， 赋 给 了 属性 id 的 数据 为 'search' 的 input 元 素 实例 的 属性 


i 


EE 


0。 


required。 在 用 


户 按 下 可 启动 提交 机 制 的 Login 按钮 之 前 ， 属 性 id 的 数据 为 'search' 的 input 元 素 实 例 的 数据 是 必 备 


的 ， 引 申 为 必须 被 填写 的 。 


phone no.pattern = "12\\d-\\d{4}-\\a{4}" 7 


【122-3456-7890】， 才 是 正则 表达 式 字面 量 【12\d-\d{4}-\d{4}】 对 应 的 正确 的 手相 
外 ， 将 正则 表达 式 字面 量 【12\d-\d{4}-\d{4}】 赋 给 属性 id 的 数据 为 phone_no' 的 属性 


涧 


email addr.required = true; 


此 语句 使 得 属性 id 的 数据 为 phone_no' 的 input 元 素 实例 ， 被 填 入 的 手机 号 码 必须 类 似 于 


1 号 码 格式 。 此 
FE pattern 时 ， 必 


重复 其 反 斜 杠 符号 【\】， 成 为 【12\d-\d{4}-\d{4}】， 才 不 至 于 产生 JavaScript 语法 上 的 问题 。 


此 语句 将 布尔 值 tue， 赋 给 了 属性 id 的 数据 为 email_ addr 的 input 元 素 实例 的 
在 用 户 按 下 可 启动 提交 机 制 的 Login 按钮 之 前 ， 属 性 id 的 数据 为 "email_ addr 的 inpu 
据 是 必 备 的 ， 引 申 为 必须 被 填写 的 。 


email addr.pattern = "^\\Wwt(\\.\\wt) ?8@\\wt(\\.\\w+) {1,3}$" 7 


属性 required。 
t 元 素 实 例 的 数 


在 此 语句 中 ， 将 匹配 电子 邮件 地 址 的 正则 表达 式 字面 量 【和 w+(\Ww+)?@\Ww+Q\w+){1,3}$】， 
赋 给 属性 id 的 数据 为 'email_ addr 的 input 元 素 实例 的 属性 pattern 时 ， 必 须 重 复 其 反 斜 杠 符号 【\】， 
成 为 【^ 作 w+QNWNWw+)?@Ww+Q\WNw+){1,3}$】， 才 不 至 于 产生 JavaScript 语法 上 的 问题 。 


let refs, ref ; 


此 语句 分 别 声 明了 变量 refs 与 ref。 
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check.onclick = function (event) 


refs = form01.elements ; 


form01.elements 会 返回 【在 属性 id 的 数据 为 'form01' 的 form 元 素 实例 中 ， 其 9 个 子 元 素 实例 】 
构成 的 集合 ， 并 赋 给 变量 refs。 


console.1log (refs) ; 


此 语句 显示 出 可 被 展开 的 【HTMLFormControlsCollection(9) [input#username，input#password， 
input#age, input#phone no, input#email addr, input#search, button#check, button, button, username: 
input#username, password: input#password, age: input#age, phone no: input#phone no, email addr: 
input#email addr, …]】 的 信息 。 


console.1og('') ; 


for (ref of refs) 
在 变量 refs 的 集合 中 ， 内 含 9 个 子 元 素 实例 ， 所 以 这 个 【for...of { .…} 】 循 环 语句 会 迭代 9 次 。 
{ 


if (ref.tagName == 'BUTTON') continue ; 
此 语法 用 来 在 变量 ref 当前 对 应 的 元 素 实 例 中 ,判断 其 元 素 名 称 / 标签 名 称 (tag name) 是 否 
为 'BUTTON'。 若 其 为 BUTTON'， 则 【reftagName 一 'BUTTON')】 会 返回 布尔 值 tue， 使 得 子 语句 
【continue ;】 被 执行 ， 从 而 直接 跳 转 至 上 述 循环 语句 的 下 一 次 迭代 。 
else if (! ref.checkValidity()) 
此 语法 用 来 检验 (check) 变量 ref 的 数据 的 有 效 性 〈validity) 。 若 变量 ref 的 数据 ， 存 在 以 下 
任何 一 个 问题 ， 则 refcheckValidityO) 会 返回 布尔 值 false: 
@ ”其 数据 是 必 备 (required ) 的 ， 却 未 被 填 入 任何 数据 。 
@ ”其 数据 不 符合 特定 格式 或 者 数值 范围 。 


{ 


ref.style.border = '2px IndianRed solid' ; 


此 语句 使 得 变量 ref 当前 对 应 的 【其 数据 有 问题 】 的 元 素 实例 ， 在 网 页 上 呈现 出 2 像素 (2px) 
宽 的 印度 红色 (Indian red) 的 实 线 (solid) 边框 (border) 。 


for (let prop in ref.validity) 


在 此 语法 中 , ref.validity 会 返回 ValidityState 对 象 实例 , 例如 【ValidityState {valueMissing: false， 
typeMismatch: false, patternMismatch: false, tooLong: false, tooShort: false, …}】。 也 因此 ， 变 量 prop 
在 for 循环 语句 的 每 次 迭代 中 ， 均 会 被 赋 给 代表 特定 属性 名 称 的 字符 串 'valueMissing'、 
'typeMismatch'、'pattemMismatch'、'tooLong' 和 "tooShort' 等 。 


{ 
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if (ref.validity[prop]) 
此 语法 用 来 判断 ref.validity[prop] 是 否 返 回 布尔 值 true 。 若 变量 prop 的 数据 字符 串 为 
"valueMissing' ， 则 语法 【refvalidity[prop] 】 等 价 于 语法 【 ref.validity['valueMissing'] 】 和 语法 
【refvalidity.valueMissing】。 
若 【refvalidity[prop]】 返 回 布尔 值 true， 则 代表 变量 ref 对 应 的 元 素 实例 的 数据 ， 出 现 了 
valueMissing ( 值 的 缺失 ) 的 问题 ， 也 就 是 缺少 (missing) 必 备 的 (required) 数据 值 (data value) 。 


{ 


console.log(‘Error message: (${prop}) ${ref.validationMessage} ) ; 
此 语句 会 显示 出 类 似 【Error message: (valueMissing) 请 填写 此 字段 。】 或 【Error message: 
(patternMismatch) 请 与 所 请 求 的 格式 保持 一 致 。】 的 信息 。 


// ref.setCustomValidity('Please fill the text field or Correct the format. Orz'); 
} 
} 
} 


else ref.style.border = '2px YellowGreen solid' ; 
此 语法 使 得 变量 ref 当前 对 应 的 【其 数据 无 问题 】 的 元 素 实例 ， 在 网 页 上 呈现 出 2 像素 宽 的 黄 
绿色 (yellow green) 的 实 线 边 框 。 
} 
}; 
上 述 语法 将 匿名 函数 的 定义 , 赋 给 了 属性 id 的 数据 为 'check' 的 button 元 素 实例 的 属性 onclick。 
一 旦 上 述 button 元 素 实 例 被 单 击 时 ， 上 述 匿 名 函数 就 会 被 调用 。 


20.3 ”异步 数据 传输 


在 JavaScript 语言 中 ， 异 步 数 据 传输 的 过 程 ， 是 倚赖 JavaScript 引擎 支持 的 【异步 JavaScript 
和 XML (AJAX，asynchronous JavaScript and XML) 】 的 技术 ， 才 得 以 实现 的 。 然 而 ，AJAX 技术 
现今 不 再 只 限于 传递 XML 文档 的 数据 , 也 可 用 来 传递 纯 文 本 (plain text) 或 JSON 文本 (JSON text, 
JavaScript object notation text) 等 。 

在 网 页 上 的 异步 数据 传输 的 过 程 中 ， 客 户 端 和 服务 器 端 不 用 等 待 对方 的 回应 〈response) ， 即 
可 继续 当前 的 操作 ， 并 互相 传递 特定 数据 ， 进 而 完成 以 下 任务 : 

@ ”传递 数据 至 特定 服务 器 。 

@ ”接收 来 自 特定 服务 器 的 数据 。 

日 ”在 无 须 重 新 加 载 网 页 文档 的 情况 下 ， 更 新 其 页 面 的 部 分 内 容 。 
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20.3.1 AJAX 的 工作 原理 


AJAX 技术 的 工作 原理 ， 大 致 由 如 下 7 个 步骤 来 实现 : 


(1) 在 客户 端的 当前 网 页 中 ，JavaScript 引擎 处 理 已 经 发 生 的 特定 事件 。 

(2) 在 客户 端的 当前 网 页 中 ，JavaScript 引擎 创建 XMLHttpRequest 对 象 实例 。 

(3) 在 客户 端的 当前 网 页 中 , JavaScript 引擎 将 【内 含 特定 数据 的 XMLHttpRequest 对 象 实例 】 
的 请 求 request) ， 传 递 至 特定 网 络 服务 器 。 

(4) 网 络 服务 器 处 理 来 自 客户 端的 请 求 。 

(5) 网 络 服务 器 将 处 理 了 请 求 之 后 的 响应 (response 数据 ， 传 递 至 客户 端 。 

(6) 在 客户 端的 当前 网 页 中 ，JavaScript 引擎 读 取 来 自 网 络 服 务 器 的 响应 数据 。 

(7) 在 客户 端的 当前 网 页 中 ，JavaScript 引擎 根据 来 自 网 络 服务 器 的 响应 数据 ， 加 以 更 新 其 
页 面 的 部 分 内 容 。 


对 于 AJAX 的 工作 原理 的 综合 理解 ， 请 参看 如 下 带 有 2 个 源 代码 文档 的 示例 。 
【20-3-1-AJAX-working-principles.html]】 


<!DOCTYPE html> 
<html> 
<head> 
<title>AJAX working principles</title> 
<style> 
select, button 
{ 
font-size: 1.2em ; 
} 
</style> 
</head> 
<body align="center"> 
<form id="form01" method="get" action="20-3-1-server-responses.php"> 
<select id="fruit" name="fruit"> 
<option value="">Choose a fruit</option> 
<option value="apple">Apple</option> 


<option value="durian">Durian</option> 

<option value="grape">Grape</option> 

<option value="kiwifruit">Kiwifruit</option> 

<option value="mango">Mango</option> 
</select> 


<p></p> 
<button type="submit">Confirm</button> 
</form> 
</body> 
<script> 
</script> 
</html> 


【相关 说 明 】 
首先 ， 用 户 需 要 在 正式 或 者 调试 用 途 的 网 络 服务 器 的 公共 〈public) 目录 里 ， 放 置 本 示例 的 网 
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页 文档 【20-3-1-AJAX-working-principles.html】 和 男 一 动态 网 页 文档 【20-3-1-server-responses.php】。 
若 在 客户 端 ， 通 过 file 协议 ， 浏 览 本 示例 网 页 ， 则 其 异步 数据 传输 的 机 制 ， 会 无 法 正常 运作 ; 
必须 通过 HTTP 协议 ， 才 能 正常 进行 异步 数据 的 传输 。 
在 本 示例 网 页 中 的 form 元 素 实例 的 起 始 语 法 【<form id="form01"” method="get" 
action="20-3-1-server-responses.php">】 里 ， 设 置 了 : 


@ 属性 method 的 数据 为 'get 或 'post'。 
@ ”属性 action 的 数据 为 另 一 动态 网 页 文档 的 【名 称 】 或 者 【所 在 路 径 + 名 称 】 的 字符 串 ， 例 如 
20-3-1-server-responses.php'。 


因为 本 示例 的 网 页 文档 【20-3-1-AJAX-working-principleshtml 】 和 动态 网 页 文档 
【 20-3-1-server-responses.php 】， 被 放置 于 特定 网 络 服务 器 的 相同 目录 里 ， 所 以 字符 串 
'20-3-1-server-responses.php' 并 未 带 有 其 所 在 路 径 。 

当 用 户 在 属性 name 的 数据 为 "fruit 的 select 元 素 实 例 中 ， 选 择 了 特定 项 目 〈 例 如 数据 为 'apple' 
的 项 目 Apple) ， 并 按 下 可 启动 提交 机 制 的 Confirm 按钮 之 后 ， 客 户 端的 浏览 器 便 会 将 用 户 选择 的 
项 目的 相关 数据 (例如 元 长 的 字符 串 'The apple tree (Malus pumila, commonly and erroneously called 
Malus domestica) .…, Greek and European Christian traditions.') ,传递 至 网 络 服务 器 ， 并 按照 动态 网 页 
文档 【20-3-1-server-responses.php】 中 的 PHP 源 代码 的 指示 ， 进 一 步 将 响应 数据 ， 回 复 给 客户 端的 
浏览 器 。 最后， 客户 端的 浏览 器 , 便 可 进一步 将 网 络 服务 器 回复 的 响应 数据 ， 显 示 在 浏览 器 窗口 的 
网 页 上 。 


【20-3-1-server-responses.php】 


<?php 
$fruits['apple'] = 'The apple tree (Malus pumila, commonly and erroneously called Malus 

domestica) is a deciduous tree in the rose family best known for its sweet, pomaceous fruit, 
the apple. It is cultivated worldwide as a fruit tree, and is the most widely grown species 
in the genus Malus. The tree originated in Central Asia, where its wild ancestor, Malus 
sieversii, is still found today. Apples have been grown for thousands of years in Asia and 
Europe, and were brought to North America by European colonists. Apples have religious and 
mythological significance in many cultures, including Norse, Greek and European Christian 
traditions.' ; 


$fruits['durian'] = 'The durian (/ djverian/) or / dvrien/ is the fruit of several tree species 
belonging to the genus Durio. There are 30 recognised Durio species, at least nine of which 
Produce edible fruit, and over 300 named varieties in Thailand, 102 in Indonesia, and 100 
in Malaysia. Durio zibethinus is the only species available in the international market: 
other species are sold in their local regions.' ; 


$fruits['grape'] = 'A grape is a fruit, botanically a berry, of the deciduous woody vines of 
the flowering plant genus Vitis. Grapes can be eaten fresh as table grapes or they can be 
used for making wine, jam, juice, jelly, grape seed extract, raisins, vinegar, and grape 
seed oil. Grapes are a non-climacteric type of fruit, generally occurring in clusters.' ; 


$fruits['kiwifruit'] = "Kiwifruit (often abbreviated as kiwi) or Chinese gooseberry is the 
edible berries of several species of woody vines in the genus Actinidia. [1] [2] The most common 
cultivar group of kiwifruit ("Hayward") is oval, about the size of a large hen\'s egg (5 
-8 cm (2.0-3.1 in) in length and 4.5-5.5 cm (1.8-2.2 in) in diameter). It has a fibrous, 
dull greenish-brown skin and bright green or golden flesh with rows of tiny, black, edible 
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seeds. The fruit has a soft texture and a sweet but unique flavor. It is a commercial crop 
in several countries, such as China, Italy, New Zealand, Chile, Greece, and France.' ; 


$fruits['mango'] = 'Mangoes are juicy stone fruit (drupe) from numerous species of tropical 
trees belonging to the flowering plant genus Mangifera, cultivated mostly for their edible 
fruit.The majority of these species are found in nature as wild mangoes. The genus belongs 
to the cashew family Anacardiaceae. Mangoes are native to South Asia,from where the "common 
mango" or "Indian mango", Mangifera indica, has been distributed worldwide to become one of 
the most widely cultivated fruits in the tropics. Other Mangifera species (e.g. horse mango, 
Mangifera foetida) are grown on a more localized basis. It is the national fruit of India, 
Pakistan, and the Philippines, and the national tree of Bangladesh.' ; 


if ($ REQUEST['fruit'] == '' || $ REQUEST['fruit'] == 'undefined' || 
! isset($ REQUEST['fruit'])) 
{ 


exit ("No fruit is chosen...") ; 
} 
else 
{ 
echo $fruits[$ REQUEST['fruit']] . "\n"; 
} 
六 
【相关 说 明 】 
<?php 


$fruits['apple'] = 'The apple tree (Malus pumila, commonly and erroneously called Malus 
domestica) is a deciduous tree in the rose family best known for its sweet, pomaceous fruit, 
the apple. It is cultivated worldwide as a fruit tree, and is the most widely grown species 
in the genus Malus. The tree originated in Central Asia, where its wild ancestor, Malus 
sieversii, is still found today. Apples have been grown for thousands of years in Asia and 
Europe, and were brought to North America by European colonists. Apples have religious and 
mythological significance in many cultures, including Norse, Greek and European Christian 
traditions.' ; 

| 

$fruits['mango'] = 'Mangoes are juicy stone fruit (drupe) from numerous species of tropical 
trees belonging to the flowering plant genus Mangifera, cultivated mostly for their edible 
fruit.The majority of these species are found in nature as wild mangoes. The genus belongs 
to the cashew family Anacardiaceae. Mangoes are native to South Asia, from where the "common 
mango" or "Indian mango", Mangifera indica, has been distributed worldwide to become one of 
the most widely cultivated fruits in the tropics. Other Mangifera species (e.g. horse mango, 
Mangifera foetida) are grown on a more localized basis. It is the national fruit of India, 
Pakistan, and the Philippines, and the national tree of Bangladesh.' ; 


在 如 上 数 个 源 代码 片段 里 ,设置 了 变量 $fruits 的 初始 数据 ,成 为 【内 含 元 长 字符 串 
durian、grape 和 kiwifruit】 构 成 的 对 象 实 例 。 
if ($_REQUEST['fruit'] == '' || $ REQUEST['fruit'] == "undefined' || 
! isset($ REQUEST['fruit'])) 
在 网 页 文档 【20-3-1-AJAX-working-principles.html】 中 ,存在 属性 name 的 数据 为 'fruit' 的 select 
元 素 实 例 。 也 因此 ， 内 置 变量 $_REQUEST['fruit] 的 数据 ， 会 对 应 到 【属性 name 的 数据 为 [fruit 的 
select 元 素 实例 】 的 数据 ， 例 如 数据 字符 串 'apple'。 
在 上 述 语 法 里 ， 若 内 置 变量 $ REQUEST[fruit] 的 数据 ， 为 如 下 之 一 ， 则 意味 着 在 【属性 name 


公 


属性 apple、 
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的 数据 为 'fruit 的 select 元 素 实 例 中 ， 没 有 选择 任何 项 目 】 的 情况 下 ， 用 户 就 按 下 了 可 启动 提交 机 制 
的 Confirm 按钮 : 


。 空 字符 囊 "。 
@ 原始 常量 undefined (未 被 定义 )。 
@ ”完全 不 存在 (也 就 是 表达 式 【! isset($ REQUEST['fruit])】〗 所 代表 的 含义 )。 


exit ("No fruit is chosen...") ; 


此 语句 可 立即 终止 后 续 源 代码 的 执行 ， 并 将 响应 数据 "No fruit is chosen .… 回复 给 客户 端的 浏 


echo $fruits[$ REQUEST['fruit']] . "\n"; 


若 内 置 变量 $_REQUEST['fruit] 当 前 内 含 字符 串 'apple', 则 此 语句 会 将 兄长 的 响应 The apple tree 
(Malus pumila, commonly and erroneously called Malus domestica) ..., including Norse, Greek and 
European Christian traditions.<br>\n'"， 回 复 给 客户 端的 浏览 器 ， 以 供 显示 在 浏览 器 窗口 的 网 页 上 。 


20.3.2 ”AJAX 的 编程 方式 


现今 较为 流行 的 AJAX 的 编程 方式 ， 大 致 可 分 为 : 
e@ ”纯粹 通过 JavaScript 语法 。 

@ 主要 通过 jQuery 框架 。 

@ 主要 通过 AngularJS、React、Vuejs 等 框架 。 


关于 纯粹 通过 JavaScript 语法 的 编程 方式 ， 请 参看 如 下 示例 。 
【20-3-2-e1-AJAX-by-pure-JavaScript.html】 


<!DOCTYPE html> 
<html> 
<head> 
<title>AJAX by pure JavaScript</title> 
<style> 
select, button 
{ 
font-size: 1.2em ; 
} 


#message_box 
{ 
color: RoyalBlue ; 
} 

</style> 
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【相关 说 明 】 


欲 通过 AJAX 技术 ,进行 数据 传输 ， 则 可 在 JavaScript 源 代码 里 ,编写 达成 如 上 原本 的 HTML 
语法 片段 【method="get" action-"20-3-1-server-responses.php"】 的 等 价 语法 。 
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<select id="fruit" name="fruit"> 
<option value="">Choose a fruit</option> 
<option value="apple">Apple</option> 
<option value="durian">Durian</option> 
<option value="grape">Grape</option> 
<option value="kiwifruit">Kiwifruit</option> 
<option value="mango">Mango</option> 
</select> 


<p></p> 


<!-- <button type="submit" id="confirm button">Confirm</button> --> 
<button type="button" id="confirm button">Confirm</button> 


欲 通过 AJAX 技术 ， 进 行 数据 传输 ， 则 也 可 进一步 在 JavaScript 源 代码 里 ， 改 写 达成 HTML 如 上 
原本 的 HTML 语法 片段 【type="submit"】 所 实现 的 提交 机 制 。 在 此 ， 将 其 属性 type 的 数据 ， 设 置 成 为 
"button"， 使 得 上 述 button 元 素 实例 ， 变 成 一 般 按 钮 即 可 。 


<p></p> 
<div id="message box"></div> 
</form> 
</body> 
<script> 
confirm button.onclick = function (event) 


{ 


load data() ; 
此 语句 调用 了 函数 load_data0， 从 而 启动 异步 数据 传输 的 机 制 。 
1 
上 述 语法 将 匿名 函数 的 定义 ， 赋 给 了 属性 id 的 数据 为 'confirm_buttom' 的 button 元 素 实例 的 属 
性 onclick。 一 旦 上 述 button 元 素 实例 被 单 击 时 ， 上 述 匿 名 函数 就 会 被 调用 。 


function load data() 
{ 


let req = new XMLHLttPRequest () ; 


此 语句 声明 了 变量 req, 其 初始 数据 为 XMLHttpRequest() 所 返回 的 XMLHttpRequest 对 象 实例 。 


let url = '20-3-1-server-responses.php' ; 
此 语句 声明 了 变量 url， 其 初始 数据 为 代表 【文档 路 径 + 文档 名 称 】 的 字符 
'20-3-1-server-responses.php'。 因 为 上 述 php 文档 和 本 示例 的 html 文档 ， 位 于 相同 的 公共 目录 里 ， 
所 以 无 须 设置 其 文档 路 径 的 部 分 。 
let args = '?fruit=' + fruit.value ; 
此 语句 声明 了 变量 args， 其 初始 数据 为 类 似 "?fruit=apple' 的 字符 


req.onreadystatechange = function (evnt) 
{ 


年 


二 


if (this.readyState == 4 && this.status == 200) 
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在 这 个 语法 中 ， 内 置 的 局 部 变量 this， 是 指向 变量 req。 若 表达 式 【this.readyState == 4】 返 加 
布尔 值 ttwe， 则 意味 着 网 络 服务 器 已 经 处 理 了 此 次 的 请 求 (request) ， 并 将 特定 响应 数据 ， 回 复 给 
客户 端的 浏览 器 了 。 若 表达 式 【this.status == 200】 返 回 布尔 值 tue， 则 意味 着 网 络 服务 器 已 经 接受 
此 次 的 请 求 了 。 

{ 


message_box.innerHTML = this.responseText ; 

网 络 服务 器 回复 的 元 长 的 响应 数据 , 会 被 存储 于 this.responseText 里 , 并 赋 给 属性 id 的 数据 为 
message_box' 的 div 元 素 实 例 的 属性 innerHTML。 换 言 之 ， 也 就 是 将 网 络 服务 器 回复 的 元 长 的 响应 
数据 ， 例 如 'The apple tree (Malus pumila, commonly and erroneously called Malus domestica) ..., 
including Norse, Greek and European Christian traditions.",， 呈 现在 属性 id 的 数据 为 'message_box' 的 元 
素 实例 上 。 

} 


ps 
上 述 语法 将 等 号 右 侧 的 匿名 函数 的 定义 ， 赋 给 了 变量 req 所 代表 的 XMLHttpRequest 对 象 实例 
的 属性 onreadystatechange， 使 得 网 页 当前 的 加 载 状态 ， 一 旦 有 了 改变 时 ， 上 述 匿名 函数 就 会 被 调 


req.open ("GET", url + args, true) ; 

在 此 ， 语句 【req.open("GET", url + args, true) :】 当 前 等 价 于 更 为 明确 的 语句 【req.open("GET"， 
"20-3-1-server-responses.php?fruit=apple", true) ;】， 并 启动 了 变量 req 的 XMLHttpRequest 对 象 实 
例 所 代表 的 请 求 程序 。 

函数 open0 中 第 1 个 参数 数据 为 "GET"， 意 味 着 在 请 求 程序 中 ， 欲 传递 至 网 络 服务 器 的 数据 字 
符 串 ， 会 被 附加 于 动态 网 页 文档 对 应 的 网 址 里 的 末尾 之 处 ， 例 如 网 页 文档 对 应 的 网 址 

【20-3-1-server-responses.php?fruit=apple】 里 的 【?fruit=apple】。 
函数 open0 第 3 个 参数 数据 为 布尔 值 true,， 意味 着 其 数据 传输 是 采用 异步 (asynchronous) 方式 ， 
使 得 在 数据 传输 的 同时 ， 用 户 还 可 以 继续 操作 当前 网 页 上 的 其 他 功能 。 若 其 第 3 个 参数 数据 ， 被 设 
置 为 布尔 值 false， 则 意味 着 其 数据 传输 是 采用 同步 (synchronous) 方式 ， 进 而 导致 在 数据 传输 的 期 
间 内 ， 无 法 操作 当前 网 页 上 的 其 他 功能 。 
req.send() ; 

此 语句 在 【变量 req 的 XMLHttpRequest 对 象 实例 所 代表 的 请 求 程序 】 中 ， 使 得 其 相关 数据 字 

符 串 ， 正 式 被 传递 到 网 络 服务 器 。 
} 

上 述 语法 定义 了 函数 load_data()。 

接 下 来 ， 关 于 主要 通过 jQuery 框架 的 编程 方式 ， 请 参看 如 下 示例 。 

【20-3-2-e2-AJAX-by-jQuery.html] 


<!DOCTYPE html> 


ex 
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【相关 说 明 】 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
运用 jQuery 框架 的 语法 和 函数 库 之 前 ， 必 须 通 过 script 元 素 实例 和 其 属性 src 的 协助 ， 使 得 其 
属性 src 的 数据 ， 成 为 在 特定 网 址 中 ， 其 特定 版 本 的 jQuery 框架 对 应 的 文档 名 称 ， 例 如 
"https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"。 


</body> 
<script> 


$("#confirm button").click(load data) ; 
此 语句 融入 了 jQuery 框架 的 语法 ， 使 得 属性 id 的 数据 为 '(confirm_button' 的 button 元 素 实 例 ， 
一 旦 被 单 击 时 ， 则 名 称 为 load_data 的 函数 ， 就 会 被 调用 。 


function load data() 
{ 


let url = '20-3-1-server-responses.php' }; 

此 语句 声明 了 变量 ul， 其 初始 数据 为 代表 【文档 路 径 + 文档 名 称 】 的 字符 串 
'20-3-1-server-responses.php'。 因 为 上 述 php 文档 和 本 示例 的 html 文档 ， 位 于 相同 的 公共 目录 里 ， 所 
以 无 须 设置 其 文档 路 径 的 部 分 。 

$.ajax( 
{ 


url: url, 


在 这 个 语法 中 ， 其 冒号 左 侧 的 url， 是 指 特定 对 象 实例 的 属性 (property) 名称， 其 冒号 右 侧 的 
url， 则 是 指 【 数 据 为 字符 串 '20-3-1-server-responses.php'】 的 变量 url。 也 因此 ， 此 语法 等 价 于 【url: 
'20-3-1-server-responses.php',】 。 

data: {fruit: fruit.value}, 

在 这 个 语法 中 ， 其 冒号 左 侧 的 data， 是 指 特定 对 象 实例 的 属性 名 称 ， 其 冒号 右 侧 的 {fruit: 
fruit.value}， 则 是 一 个 子 对 象 实例 。 在 这 个 子 对 象 实例 的 语法 中 ， 其 冒号 左 侧 的 fruit， 是 这 个 子 对 
象 实例 的 一 个 属性 名 称 ， 其 右 侧 的 fruit.value， 则 会 返回 【属性 id 的 数据 为 'fruit 的 select 元 素 实例 】 
的 数据 字符 串 ， 例 如 'apple'。 关 fruit.value 返回 字符 串 'apple'"， 则 上 述 语法 等 价 于 【 data: {fruit: 
'apple'},】 。 


success: function(responseText) 
{ 


$("#message_box") .html (responseText) ; 


这 个 语句 和 JavaScript 语句 【message_box.innerHTML = responseText ;】 是 等 价 的 。 在 这 个 语 
名 中 ， 网 络 服务 器 回复 的 元 长 的 响应 数据 ， 会 被 存储 于 参数 responseText 里 ， 并 赋 给 属性 id 的 数 
据 为 "message_box' 的 div 元 素 实例 的 属性 innerHTML 。 换 言 之 ， 也 就 是 将 网 络 服务 器 回复 的 元 长 的 
响应 数据 ， 例 如 'The apple tree (Malus pumila, commonly and erroneously called Malus domestica) …， 
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including Norse, Greek and European Christian traditions.， 旦 现在 属性 id 的 数据 为 'message_box' 的 元 
素 实 例 上 。 
} 
在 上 述 语法 里 ， 其 冒号 左 侧 的 success， 可 被 视 为 对 象 实例 中 的 函数 名 称 ， 这 是 因为 其 冒号 右 
侧 的 语法 ， 是 1 个 带 有 参数 resposeText 的 匿名 函数 的 定义 。 
Be 
上 述 语法 为 融入 了 jQuery 框架 的 语法 , 一 旦 jQuery 框架 的 函数 【$.ajax(...)】 被 调用 时 ， 则 【内 
含 属性 url、data 与 函数 success(.…) 的 定义 】 的 对 象 (object) 实例 ， 就 会 成 为 了 被 传 入 上 述 函 数 
【S$.ajax(...)】 的 参数 数据 。 
} 
上 述 语法 完成 了 函数 load_data0 的 定义 。 
关于 主要 通过 AngularJS 框架 的 编程 方式 ， 请 参看 如 下 示例 。 
【20-3-2-e3-AJAX-by-AngularJS.html】 


<!DOCTYPE html> 
<html> 
<head> 
<title>AJAX by AngularJs</title> 
<style> 
select, button 
{ 
font-size: 1.2em ; 


} 


#message_ box 
{ 
color: RoyalBlue ; 
} 
</style> 
</head> 
<body align="center"> 
<div ng-app="my app" ng-controller="my ctrl"> 
<form id="form01"> 


<select ng-model="fruit"> 
<option value="">Choose a fruit</option> 
<option value="apple">Apple</option> 
<option value="durian">Durian</option> 
<option value="grape">Grape</option> 
<option value="kiwifruit">Kiwifruit</option> 
<option value="mango">Mango</option> 

</select> 


<p></p> 
<button type="button" id="confirm button" ng-click="load data()">Confirm</button> 


<p></p> 
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<div id="message box"> 
<div>{{message}}</div> 
</div> 


</form> 
</div> 
</body> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
<script> 
let spa = angular.module('my app', []) ; 


spa.controller('my ctrl', my controller) ; 


function my controller ($scope, S$http) 
{ 
$scope.url = '20-3-1-server-responses.php' ; 


$scope.load data = function (event) 
{ 
$scope.args = '?fruit=' + $scope.fruit ; 


console.log($scope.args) ; 
let response object = $http.get($scope.url + $scope.args) ; 


response object.then( (response) => $scope.message = response.data, (response) => 
$scope.message = 'Error occurred...') ; 


} 
</script> 
</html> 


【相关 说 明 】 
<body align="center"> 


<div ng-app="my_app"ng-controller="my_ ctrl"> 
在 这 个 HTML 语法 中 ， 通 过 属性 ng-app 和 其 数据 ， 使 得 div 元 素 实例 ， 成 为 了 代表 名 称 为 
my_app 的 AngularJS 应 用 程序 (application program) 。 通 过 属性 ng-controller 和 其 数据 ， 使 得 
AngularJS 应 用 程序 ， 内 含 了 名 称 为 my_ctrl 的 AngularJS 控制 器 〈controller) 。 


<form id="form01"> 


<select ng-model="fruit"> 
在 这 个 HTML 语法 中 ， 通 过 属性 ng-model 和 其 数据 ， 使 得 这 个 select 元 素 实例 的 数据 ， 对 应 
到 【被 附加 至 AngularJS 对 象 实例 $scope 中 ， 其 名 称 为 fuit】 的 AngularJS 变量 【$scope.fruit】 的 


<option value="">Choose a fruit</option> 
<option value="apple">Apple</option> 
<option value="durian">Durian</option> 
<option value="grape">Grape</option> 
<option value="kiwifruit">Kiwifruit</option> 
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<option value="mango">Mango</option> 
</select> 


<P></P> 


<button type="button" id="confirm button" ng-click="load data()">Confirm</button> 


在 这 个 HTML 语法 中 ， 


属性 ng-click 和 其 数据 ， 可 在 这 个 button 元 素 实例 被 按 下 时 , 调用 【被 
附加 至 AngularJS 对 象 实 例 $scope 中 , 其 名 称 为 load_data】 的 AngularJS 函数 【$scope.load_data()】。 
<p></p> 


<div id="message box"> 


<div>{{message}}</div> 


AngularJS 支持 的 语法 【{{message}}】， 可 使 得 这 个 div 元 素 实例 的 数据 ， 对 应 到 【被 附加 至 
AngularJS 对 象 实例 $scope 中 ， 其 名 称 为 message】 的 AngularJS 变量 【S$scope.message】。 


</div> 


</form> 
</div> 
</body> 


<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
运用 AngularJS 框架 的 语法 和 函数 库 之 前 ， 必 须 通 过 script 元 素 实例 和 其 属性 src 的 协助 ， 设 


置 其 属性 sre 的 数据 ， 成 为 在 特定 网 址 中 ， 其 特定 版 本 的 AngularJS 框架 对 应 的 文档 名 称 ， 例 如 
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"。 


<script> 


let spa = angular.module('my app', []) ; 


此 语句 声明 了 变量 spa， 其 初始 数据 为 AngularJS 函数 【angular.module(my_app'，[)】 所 返 
的 AngularJS 模块 (module) 实例 。 其 中 ，【 


属性 ng-app 的 数据 为 "my_app'】 的 div 元 素 实例 ， 
被 视 为 AngularJS 应 用 程序 (application program) 。 


人 


spa.controller('my_ctrl'，my_controller) ; 
此 语句 在 变量 spa 所 代表 的 AngularJS 模块 实例 中 , 使 得 名 称 为 my_controller 的 函数 ， 成 为 了 
其 控制 器 〈controller) 函数 。 


function my_controller ($scope, $http) 
{ 


$scope.url = '!20-3-1-server-responses .php'" 


此 语句 将 字符 


昌 '20-3-1-server-responses.php'"， 赋 给 了 新 的 AngularJS 变量 【$scope.url】。 
$scope.load data = 


function (event) 
{ 


$scope.args = '?fruit=' + $scope.fruit ; 
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在 HTML 语法 中 ， 属 性 ng-model 的 数据 为 'fruit 的 select 元 素 实例 ， 会 对 应 到 AngularJS 变量 
$scope.fruit。 所 以 ， 上 述 select 元 素 实例 被 选 定 的 数据 字符 串 〈 例 如 'apple') ， 会 成 为 AngularJS 变 
量 $scope.fruit 当前 的 数据 字符 串 。 一 旦 上 述 select 元 素 实例 被 重新 选 定 新 的 项 目 时 ， 则 新 的 项 目 所 
代表 的 数据 字符 串 ， 就 会 成 为 AngularJS 变量 $scope.fruit 的 当前 数据 字符 串 。 也 因此 ， 这 个 语句 将 
类 似 ?fruit=apple' 的 字符 串 ， 赋 给 了 AngularJS 变量 $scope.args。 


console.log($scope.args) ; 

此 语句 在 浏览 器 的 调试 工具 【Console】 面 板 里 ， 显 示 出 【?fruit=apple】 的 信息 。 

let response object = $http.get($scope.url + $scope.args) ; 

在 上 述 select 元 素 实例 中 ， 若 数据 字符 串 为 apple' 的 Apple 项 目 被 选中 时 ， 则 语法 
【S$http.get($scope.url + $scope.args)】 等 价 于 【S$http.get(20-3-1-server-responses.php?fruit=apple)】， 
并 且 使 得 客户 端的 浏览 器 ， 正 式 向 网 络 服务 器 ， 传 递 其 网 址 为 
【20-3-1-server-responses.php?fruit=apple】 的 请 求 。 一 旦 网 络 服务 器 接受 并 完成 了 客户 端的 请 求 程 
序 之 后 ， 就 会 将 响应 数据 ， 回 复 给 客户 端的 浏览 器 。 

也 因此 ， 这 个 语句 声明 了 变量 response_object， 其 初始 数据 为 函数 【S$http.get($scope.url + 
$scope.args)】 所 返回 的 响应 对 象 (response object) 实例 ， 并 且 内 含 网 络 服务 器 回复 的 响应 数据 。 


response object.then( (response) => $scope.message = response.data, (response) => 
$scope.message = 'Error occurred...') ; 


在 这 个 语句 中 ， 通 过 变量 response_object 内 含 的 响应 对 象 实例 ， 驱 使 了 JavaScript 引擎 ， 加 以 
判断 网 络 服务 器 的 请 求 程 序 ， 是 否 顺利 完成 了 。 
若 其 请 求 程序 已 经 顺利 完成 ， 则 上 述 第 1 个 箭头 函数 【(response) => S$scope.message = 
response.data】 会 被 调用 ， 并 且 在 当前 网 页 上 ， 显 示 出 类 似 【The apple tree (Malus pumila, commonly 
and erroneously called Malus domestica) ..., Greek and European Christian traditions.】 的 信息 。 

若 其 请 求 程序 以 失败 收场 , 则 第 2 个 箭头 函数 [(response) => $scope.message = 'Error occurred..'】 
会 被 调用 ， 并 且 在 当前 网 页 上 ， 显 示 出 【Error occurred…】 的 信息 。 

在 上 述 语 法 的 等 号 右 侧 中 ， 将 带 有 参数 event 的 匿名 函数 的 定义 ， 赋 给 了 $scope.load_data， 进 
而 使 得 load_data 被 视 为 AngularJS 函数 。 


20.4 练 习 题 


1. 已 知 在 特定 网 页 中 ， 存 在 如 下 HTML 源 代 码 片段 所 代表 的 input 元 素 实 例 : 

<input type="text" id="username" name="username" value=" 用 户 名 称 . . ."> 

试 编写 JavaScript 源 代码 片段 ， 使 得 上 述 input 元 素 实例 中 的 数据 ， 在 被 传递 至 网 络 服务 器 之 
前 ， 进 行 如 下 各 项 验证 的 动作 : 
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其 数据 为 必 备 的 。 
其 数据 的 字符 个 数 ， 最 少 为 6 个 、 最 多 为 16 个 。 
其 数据 中 的 各 字符 ， 必 须 是 下 画 线 、 字 母 或 者 数字 的 组 合 。 
其 数据 不 可 以 是 数字 开头 的 ， 必 须 是 以 下 画 线 或 者 字母 开头 的 。 
2. 已 知 在 特定 网 页 中 ， 存 在 如 下 HTML 源 代码 片段 所 代表 的 input 元 素 实例 : 
<input id="salary"” name="salary"” value=" 工 资 数值 . . ." 
试 编写 JavaScript 源 代码 片段 ， 使 得 上 述 input 元 素 实例 中 的 数据 ， 在 被 传递 至 网 络 服务 器 之 
前 ， 进 行 如 下 各 项 验证 的 动作 : 
”其 数据 为 必 备 的 。 
@ 其 数据 必须 是 整数 。 
日 其 数据 所 代表 的 整数 ， 必 须 至 少 为 2300。 


3. 已 知 在 特定 网 页 中 ， 存 在 如 下 HTML 源 代码 片段 所 代表 的 input 元 素 实例 : 

<input type="text" id="employee_no" name="employee_no” value=" 员 工 编号 . . ." 

试 编写 JavaScript 源 代 码 片 段 ， 使 得 上 述 input 元 素 实例 中 的 数据 ， 在 被 传递 至 网 络 服务 器 之 

前 ， 进 行 如 下 各 项 验证 的 动作 : 

@ ”其 数据 为 必 备 的 。 

日 其 数据 必须 是 以 2 个 字母 衔接 1 个 减 号 【-】 开 头 的 。 

”其 数据 在 减 号 【-】 之 后 ， 再 衔接 6 个 数字 。 

4. 试 编写 JavaScript 源 代码 ， 以 通过 AJAX 技术 ， 实 现 以 下 功能 。 

日 在 特定 网 页 被 加 载 完成 之 后 ， 便 传递 用 户 端的 操作 系统 和 浏览 器 的 版 本 相关 的 数据 ， 至 网 址 
为 https://www.qzmp.wxno.com 的 网 络 服务 器 ， 进 而 请 求 通过 optclient info.php， 以 处 理 来 自 
用 户 端的 数据 。 

”将 网 络 服 务 器 回复 的 响应 数据 ， 赋 给 变量 message。 

5. 试 编写 JavaScript 源 代码 ， 以 通过 AJAX 技术 ， 实 现 以 下 功能 。 

@ 在 当前 网 页 中 ,每 隔 10 秒 钟 ， 便 传递 代表 文本 字段 且 属 性 id 的 数据 为 'questiom' 的 input 元 素 
实例 的 数据 ， 至 网 址 为 https://www.qzmp.wxno.com 的 网 络 服务 器 ， 进 而 请 求 通过 
opt/answers.php， 以 处 理 来 自用 户 端的 数据 。 

@ 将 网 络 服务 器 回复 的 响应 数据 ， 赋 给 变量 message。 


第 21 章 
响应 式 机 制 


响应 式 机 制 (responsive mechanism) 即 是 指 响应 式 网 页 设计 (RWD, responsive web design) 
的 技术 。 现今 因为 JavaScript 语言 的 完善 , RWD 的 技术 也 可 单独 通过 JavaScript 语法 , 来 完整 实现 ! 


21.1 通过 CSS 语法 的 版 本 


通过 CSS 语法 来 实现 响应 式 机 制 的 方式 ， 即 是 标准 、 但 并 不 是 唯一 的 途径 。 浏 览 器 先行 解释 
当前 网 页 的 HTML 语法 的 元 信息 (meta data) ， 再 解释 其 CSS 语法 的 媒体 查询 (media query) ， 
即 可 达成 RWD 的 技术 ， 让 特定 网 页 内 容 ， 可 以 顺应 不 同 移动 设备 (mobile device) 和 台式 电脑 
(desktop computer) 的 屏幕 《〈screen) ， 进 而 被 呈现 于 屏幕 上 不 同 尺 寸 的 窗口 (window) 里 。 对 于 
通过 CSS 语法 ， 达 成 RWD 的 技术 的 综合 理解 ， 请 参看 如 下 示例 。 


【21-1-^-responsive-by-CSS-syntax.html]】 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>responsive by CSS syntax</title> 
<style> 
header, aside, main, footer 
{ 
padding: 5px ; 
box-sizing: border-box ; 


header 
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<footer>Footer</footer> 
</body> 
<script> 
</script> 
</html> 


【相关 说 明 】 
请 参考 本 节 下 面 的 相关 说 明 。 
21.1.1 页 面 的 元 信息 


在 网 页 文档 中 的 HTML 源 代码 里 ， 和 响应 式 机 制 有 关 的 元 信息 (meta data) ， 主 要 为 视 口 
Cviewport) 相关 特征 的 设置 语法 ， 例 如 : 


<meta name="viewport" content="width=device-width, initial-scale=1.0"> 


其 中 : 
e@ 语法 【width=device-width】 使 得 浏览 器 根据 当前 装置 (device ) 的 屏幕 宽度 (screen width )， 
来 呈现 当前 网 页 的 内 容 。 


@ 语法 【initial-scale=1.0】 使 得 浏览 器 根据 100% ( 1.0 ) 的 初始 缩放 比例 (initial scale )， 设 置 在 
视 口 (viewport ) 中 ， 呈 现 特定 网 页 内 容 的 显示 比例 。 


21.1.2 ”媒体 查询 


所 谓 的 媒体 查询 (media query) ， 即 是 在 特定 网 页 中 ， 依 据 不 同 媒体 类 型 (media type) 的 设 
备 (device) ， 对 特定 元 素 element) 实例 ， 应 用 不 同 的 CSS 规则， 使 得 这 个 元 素 实例 ， 在 不 同 
设备 的 屏幕 窗口 里 ， 呈 现 出 不 同 的 外 观 。 
aside 
{ 


color: SeaGreen ; 


background-color: YellowGreen ; 
width: 20% ; 
这 两 个 语句 在 aside 元 素 实例 上 ,分 别 设置 了 其 一 开始 的 背景 颜色 ,成 为 黄 绿 色 (yellow green)， 
以 及 其 宽度 ， 成 为 父 元 素 实例 的 总 宽度 的 20%。 
height: 500px ; 


display: inline-block ; 
} 


main 
{ 
color: Chocolate ; 
background-color: SkyBlue ; 


width: 80% ; 
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height: 500px ; 
这 两 个 语句 用 来 在 main 元 素 实例 中 ,设置 其 一 开始 的 背景 颜色 ， 成 为 巧克力 色 (chocolate) ， 
以 及 其 宽度 ， 成 为 父 元 素 实例 的 总 宽度 的 80%。 
display: inline-block ; 
/*position: absolute ;*/ 


right: 0 ; 
} 


emedia (max-width: 768px) 
若 浏 览 器 窗口 的 内 容 区 域 的 宽度 ， 未 超过 768 像素 ， 则 其 下 方 大 括 号 里 的 CSS 源 代码 ， 就 会 
被 应 用 。 


aside, main 


{ 
width: 100% ; 


} 
此 语法 用 来 设置 aside 与 main 元 素 实例 的 宽度 ， 成 为 其 父 元 素 实例 〈body 元 素 实 例 ) 的 总 宽 
度 的 100%。 
aside 


{ 
background-color: LightGreen ; 


i 


main 
{ 
background-color: DeepSkyBlue ; 


} 
这 两 段 语 法 ， 用 来 改变 aside 和 main 元 素 实例 的 背景 颜色 。 
} 

@ 若 浏 览 器 窗口 的 内 容 区 域 的 宽度 ， 未 超过 768 像素 ， 则 上 述 语法 将 使 得 header、aside、main 
与 footer 元 素 实例 在 网 页 上 ， 除 了 占用 其 总 宽度 之 外 ， 均 为 由 上 至 下 地 纵向 排列 。 

日 若 浏览 器 窗口 的 内 容 区 域 的 宽度 ,超过 768 像素 , 虽然 纵向 排列 的 header 与 footer 元 素 实例 ， 
依然 占用 其 总 宽度 ; 但 是 ， 横 向 排列 的 aside 元 素 实例 ， 占 用 其 总 宽度 的 20%， 而 main 元 素 
实例 ， 则 占用 其 总 宽度 的 80%。 

通过 上 述 CSS 源 代码 ， 使 得 本 示例 网 页 ， 具 有 响应 式 〈responsive) 机 制 ， 进 而 在 浏览 器 窗口 

的 内 容 区 域 的 宽度 ， 超 过 与 未 超过 768 像素 时 ， 分 别 被 呈现 出 不 同 的 外 观 。 
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21.2 通过 JavaScript 语法 的 版 本 


原本 由 CSS 语法 所 实现 的 响应 式 机 制 ， 可 以 全 部 或 者 部 分 被 改写 ， 成 为 等 价 的 JavaScript 语 
法 。 对 于 通过 JavaScript 语法 ， 来 取代 原本 由 CSS 语法 所 实现 的 响应 式 机 制 ， 请 参看 如 下 示例 。 


【21-2-^-responsive-by-JavaScript.html] 
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【相关 说 明 】 


在 此 ， 将 被 改写 的 部 分 ， 变 成 注释 ， 以 供 读者 观察 和 比较 。 


在 此 ， 也 将 被 改写 的 部 分 ， 变 成 注释 。 
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background-color: DeepSkyBlue ; 
} 

} 

dE 


在 此 ， 亦 将 元 长 而 被 改写 的 部 分 ， 变 成 注释 。 
<script> 


window.onresize = update size ; 
此 语句 将 名 称 为 update_size 的 函数 的 定义 ， 赋 给 了 代表 浏览 器 窗口 的 window 对 象 实例 的 属 
性 onresize。 一 旦 其 窗口 当前 的 宽度 或 者 高 度 被 变更 时 , 则 名 称 为 update_size 的 函数 , 就 会 被 调用 。 
update size() ; 
在 浏览 器 开启 本 示例 网 页 时 ， 此 语句 会 使 得 名 称 为 update_size 的 函数 被 调用 ， 以 修正 当前 网 
页 的 外 观 。 


function update size() 
{ 


if (window.matchMedia(' (max-width: 768px)') .matches) 


window.matchMedia((max-width: 768px)") 会 返回 在 CSS 媒体 查询 语法 中 的 条 件 【(max-width: 
768px) 里 ,其 代表 相关 数据 的 MediaQueryList 对 象 实例 ,例如 [ MediaQueryList {media: "(max-width: 
768px)", matches: true, onchange: null} 】。 

在 上 述 语 法 里 ，window. ER width: 768px)).matehes 则 会 返回 布尔 值 false 或 者 
true。 若 浏览 器 窗口 的 内 容 区 域 的 总 宽度 ， 未 超过 768 像素 ， 则 window.matchMedia((max-width: 
768px)).matches 会 返回 布尔 值 tue， 并 执行 其 下 方 大 括 号 里 的 源 代 码 。 


{ 


with (document.querySelector('aside') .style) 


document.querySelector("aside').style 是 指 aside 元 素 实 例 的 属性 style。 通 过 此 语法 ， 可 简化 
【document.query Selector('aside').style.width】 和 【document.querySelector(aside').style.backgroundColor】， 
成 为 其 下 方 大 插 号 里 的 【width】 和 【backgroundColor】。 
{ 
width = '100%' ; 
此 语句 设置 了 aside 元 素 实例 的 宽度 ， 成 为 父 元 素 实例 的 总 宽度 (100%) 。 
backgroundColor = 'LightGreen' ; 
此 语句 设置 了 aside 元 素 实例 的 背景 颜色 ， 成 为 浅 绿色 (light green) 。 


} 


with (document.querySelector('main') .style) 


document.querySelector('main').style 是 指 main 元 素 实例 的 属性 style。 通 过 此 语法 ， 可 简化 
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【 document.querySelector('main').style.width】 和 【 document.querySelector('main').style.backgroundColor 】 ， 
成 为 其 下 方 大 插 号 里 的 【width】 和 【backgroundColor】。 


{ 
width = '100%' ; 

此 语句 设置 了 main 元 素 实例 的 宽度 ， 成 为 浏览 器 窗口 的 内 容 区 域 的 总 宽度 (100%) 。 
backgroundColor = 'DeepSkyBlue' ; 

此 语句 设置 了 main 元 素 实例 的 背景 颜色 ， 成 为 深 天 蓝 色 (deep sky blue) 。 


} 
} 


else 


若 浏览 器 窗口 的 内 容 区 域 的 总 宽度 ， 已 超过 768 像素 ， 则 window.matchMedia((max-width: 
768px)).matches 会 返回 布尔 值 false， 并 执行 其 下 方 大 括 号 里 的 源 代码 。 
{ 


with (document.querySelector('aside').style) 
{ 


width = '20%" ; 
此 语句 设置 了 aside 元 素 实例 的 宽度 ， 成 为 上 述 内 容 区 域 的 总 宽度 的 20%。 
backgroundColor = 'YellowGreen' ; 
此 语句 设置 了 aside 元 素 实例 的 背景 颜色 ， 成 为 黄 绿 色 (yellow green) 。 
} 


with (document.querySelector('main') .style) 
{ 


width = '80%' ; 
此 语句 设置 了 main 元 素 实例 的 宽度 ， 成 为 上 述 内 容 区 域 的 总 宽度 的 80%。 
backgroundColor = 'SkyBlue' ; 


此 语句 设置 了 main 元 素 实例 的 背景 颜色 ， 成 为 天 蓝 色 (sky blue) 。 


} 
} 


} 
上 述 语法 完成 了 函数 update_size() 的 定义 。 
上 述 示例 的 源 代码 ， 可 进一步 被 改写 ， 成 为 在 下 一 小 节 中 ， 更 加 简洁 的 版 本 。 
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21.2.1 简易 判断 窗口 尺寸 的 版 本 


和 欲 改 写 CSS 媒体 查询 语法 所 对 应 的 JavaScript 语法 , 成 为 更 加 简洁 的 JavaScript 语法 , 可 将 语法 【让 
(window.matchMedia((max-width: 768px)).matches)】， 改 写成 为 【让 (window.innerWidth <= 768)】 即 可 。 
请 参看 如 下 相关 【函数 名 称 】 有 所 变动 的 示例 。 

【21-2-1-version-of-simply-checking-window-size.html】 
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【相关 说 明 】 
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此 语句 将 名 称 为 change_size 的 函数 的 定义 ， 赋 给 了 代表 浏览 器 窗口 的 window 对 象 实例 的 属 
性 onresize。 一 旦 窗口 当前 的 宽度 或 高 度 被 变更 时 ， 名 称 为 change_size 的 函数 就 会 被 调用 。 
change size() ; 
在 浏览 器 开启 本 示例 网 页 时 ， 此 语句 会 使 得 名 称 为 change_size 的 函数 被 调用 ， 以 修正 当前 
页 的 外 观 。 


function change size() 
{ 


// if (window.matchMedia(' (max-width: 768px)') .matches) 
if (window.innerWidth <= 768) 


此 语法 可 用 来 判断 【浏览 器 窗口 的 宽度 ， 扣 除 垂 直 滚 动 条 的 宽度 之 后 ， 其 剩余 的 宽度 ， 是 否 
小 于 或 等 于 768 像素 】。 若 是 ， 则 执行 其 下 方 大 括 号 里 的 源 代 码 。 
{ 


with (document.querySelector('aside').style) 


document.querySelector('aside').style 是 指 aside 元 素 实例 的 属性 style。 通 过 此 语法 ， 可 简化 
【documentquerySelector(aside).style.width 】 和 【document.querySelector(aside).style.backgroundColor】， 
成 为 其 下 方 大 括 号 里 的 【width】 和 【backgroundColor】。 
{ 

width = '100%' ; 
语句 设置 了 aside 元 素 实 例 的 宽度 ， 成 为 浏览 器 窗口 的 内 容 区 域 的 总 宽度 (100%) 。 

backgroundColor = 'LightGreen' ; 
此 语句 设置 了 aside 元 素 实例 的 背景 颜色 ， 成 为 浅 绿色 (light green) 。 
} 


with (document.querySelector('main') .style) 


document.querySelector('main').style 是 指 main 元 素 实例 的 属性 style。 通 过 此 语法 ， 可 简化 
【documentquerySelector(main).style.width 】 和 【documentquerySelector(main').style.backgroundColor】， 
成 为 其 下 方 大 括号 里 的 【width】 和 【backgroundColor】。 


{ 


width = '100%" ; 

此 语句 设置 了 main 元 素 实 例 的 宽度 ， 成 为 浏览 器 窗口 的 内 容 区 域 的 总 宽度 〈100%) 。 
backgroundColor = 'DeepskyBlue' ; 

此 语句 设置 了 main 元 素 实例 的 背景 颜色 ， 成 为 深 天 蓝 色 (deep sky blue) 。 


} 
} 
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else 
若 浏览 器 窗口 的 内 容 区 域 的 宽度 ， 大 于 768 像素 ， 则 执行 其 下 方 大 括 号 里 的 源 代码 。 


{ 
with (document.querySelector('aside') .style) 
{ 


width = '20%' ; 

此 语句 设置 了 aside 元 素 实例 的 宽度 ， 成 为 上 述 内 容 区 域 的 总 宽度 的 20%。 
backgroundColor = 'YellowGreen' ; 

此 语句 设置 了 aside 元 素 实例 的 背景 颜色 ， 成 为 黄 绿 色 (yellow green) 。 


with (document.querySelector('main') .style) 
{ 


width = '80%' ; 
此 语句 设置 了 main 元 素 实例 的 宽度 ， 成 为 上 述 内 容 区 域 的 总 宽度 的 80%。 
backgroundColor = 'SkyBlue' ; 
此 语句 设置 了 main 元 素 实例 的 背景 颜色 ， 成 为 天 蓝 色 (sky blue) 。 
} 


} 


和 
上 述 语 法 完成 了 函数 change_size() 的 定义 。 
上 述 示例 的 源 代 码 ， 可 进一步 被 改写 ， 成 为 下 一 小 节 中 的 示例 源 代码 。 


21.2.2 ”直接 变更 CSS 规则 的 版 本 


欲 改 写 操控 CSS 内 联 样式 (inline style) 的 JavaScript 语法 ， 成 为 【操控 CSS 内 部 样式 (inner 
style) 】 的 JavaScript 语法 ， 需 要 通过 JavaScript 语法 【document.styleSheets[0].cssRules】 来 达成 。 
请 参看 如 下 示例 。 


【21-2-2-version-of-directly-modifying-CSS-rules.html]】 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>version of directly modifying CSS rules</title> 
<style> 
header, aside, main, footer 


{ 
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【相关 说 明 】 


此 语句 将 名 称 为 modify_rules 函数 的 定义 ， 赋 给 了 代表 浏览 器 窗口 的 window 对 象 实例 的 属性 
onresize。 一 旦 浏览 器 窗口 当前 的 宽度 或 高 度 被 变更 时 ， 名 称 为 modify_rules 的 函数 就 会 被 调用 。 


document.styleSheets[0] 会 返回 【在 当前 网 页 里 ， 代 表 第 一 个 CSS 样式 表 (style sheet) 】 的 
CSSStyleSheet 对 象 实例 , 其 实 就 是 对 应 到 当前 网 页 里 的 第 一 个 style 元 素 实例 【<style> … </style>】。 
document.styleSheets[0].cssRules 则 会 返回 上 述 CSSStyleSheet 对 象 实例 中 的 CSSRuleList 子 对 
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象 实例 ， 其 实 就 是 对 应 到 【在 当前 网 页 里 的 第 1 个 〈 索 引 值 为 0) style 元 素 实例 中 ， 其 各 个 CSS 
规则 】 的 列表 (rule list) 实例 ， 例 如 由 【header, aside, main, footer {...}】、【header {...}】、【aside 
{...}】、【main {...}】 与 【footer {...}】5 个 CSS 规则 所 组 成 的 列表 实例 。 

也 因此 ， 上 述 语 句 声明 了 变量 rules， 其 初始 数据 为 document.styleSheets[0].cssRules 所 返 
CSSRuleList 对 象 实例 。 


五 


的 


console.log(rules) ; 
console.10g('') 


console.log(rules[2].style.width) ; 


rules[2].style.width 当前 会 返回 字符 串 '20%'。 


console.log(rules[3].style.width) ; 


rules[3].style.width 当前 会 返回 字符 串 '80%'。 
console.1log('') ; 
modify rules() ; 
此 语句 使 得 名 称 为 modify_rules 的 函数 ， 会 被 调用 ， 以 修正 当前 网 页 的 外 观 。 


function modify rules() 
{ 


if (window.innerWidth <= 768) 
此 语法 用 来 判断 【浏览 器 窗口 的 宽度 ， 扣 除 垂直 滚动 条 的 宽度 之 后 ， 其 剩余 的 宽度 ， 是 否 小 
于 或 等 于 768 像素 】。 若 是 ， 则 执行 其 下 方 大 括 号 里 的 源 代 码 。 
{ 


with (rules[2].style) 
rules[2].style 是 对 应 到 当前 网 页 里 的 第 1 个 (索引 值 为 0) style 元 素 实例 中 的 第 3 个 (索引 值 
为 2) CSS 规则 实例 【aside {..….}】。 通 过 此 语法 ， 可 简化 【rules[2].style.width】， 成 为 其 下 方 大 括 
号 里 的 【width】。 
{ 
width = '100%" ; 
此 语句 设置 了 aside 元 素 实例 的 宽度 ， 成 为 浏览 器 窗口 的 内 容 区 域 的 总 宽度 (100%) 。 
backgroundColor = 'LightGreen' ; 
此 语句 设置 了 aside 元 素 实例 的 背景 颜色 ， 成 为 浅 绿色 (light green) 。 
} 


with (rules[3].style) 


rules[3].style 是 对 应 到 当 页 网 页 里 的 第 1 个 style 元 素 实例 中 的 第 4 个 (索引 值 为 3) CSS 规则 
实例 【main {...}】。 通过 此 语句 ， 可 简化 【rules[3].style.width】， 成 为 其 下 方 大 括 号 里 的 【width】。 
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width = '100%' ; 

此 语句 设置 了 main 元 素 实 例 的 宽度 ， 成 为 浏览 器 窗口 的 内 容 区 域 的 总 宽度 (100%) 。 
backgroundColor = 'DeepskyBlue' ; 

此 语句 设置 了 main 元 素 实例 的 背景 颜色 ， 成 为 深 天 蓝 色 (deep sky blue) 。 


} 


else 
若 浏 览 器 窗口 的 内 容 区 域 的 宽度 ， 大 于 768 像素 ， 则 执行 其 下 方 大 括 号 里 的 源 代码 。 
s with (rules[2] .style) 
{ 
width = '20%" ; 
此 语句 设置 了 aside 元 素 实例 的 宽度 ， 成 为 上 述 内容 区 域 的 总 宽度 的 20%。 
backgroundColor = 'YellowGreen' ; 
此 语句 设置 了 aside 元 素 实例 的 背景 颜色 ， 成 为 黄 绿色 (yellow green) 。 
} 


with (rules[3].style) 
{ 


width = '80%' ; 
此 语句 设置 了 main 元 素 实 例 的 宽度 ， 成 为 上 述 内 容 区 域 的 总 宽度 的 80%。 
backgroundColor = 'SkyBlue' ; 
此 语句 设置 了 main 元 素 实例 的 背景 颜色 ， 成 为 天 蓝 色 (sky blue) 。 


} 
} 


} 
上 述 语法 完成 了 函数 modify_rules() 的 定义 。 


21.3” 源 代码 的 加 密 


在 网 页 里 的 HTML、CSS 和 JavaScript 源 代码 ， 其 实 是 无 法 被 彻底 加 密 的 。 但 是 , 编程 人 员 可 
以 先 将 HTML 和 CSS 的 源 代码 ， 改 写成 为 等 价 的 JavaScript 源 代码 ; 然后， 再 将 其 所 有 JavaScript 
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的 源 代 码 ， 加 密 成 为 难以 被 理解 的 JavaScript 源 代码 。JavaScript 源 代码 的 加 密 操 作 ， 大 致 存在 以 
下 各 项 步骤 : 

(1) 蔡 换 各 个 名 称 ， 成 为 失去 原本 含义 的 新 名 称 。 

(2) 替换 各 个 常量 ， 成 为 等 价 且 带 有 2" 进 制 字 面 量 的 表达 式 。 

(3) 蔡 换 各 个 字符 串 ， 成 为 等 价 的 十 六 进 制 数码 所 表示 的 连续 字符 。 

(4) 删除 原本 所 有 的 注释 文本 ， 以 及 多 余 的 空白 字符 ， 包 括 空格 、 制 表 符 和 换行 符 等 。 

(5) 进行 仅 有 制造 业者 本 身 才 知道 的 更 高 级 的 编码 处 理 。 


21.3.1 改写 HTML 与 CSS 成 为 JavaScript 源 代 码 
欲 达成 加 密 任 务 ， 首 先 必须 将 特定 网 页 中 的 所 有 HTML 和 CSS 的 源 代码 ， 尽 可 能 地 改写 成 为 
等 价 的 JavaScript 源 代 码 。 请 参看 如 下 示例 。 
【21-3-1-recodings-from-HTML-and-CSS-to-JavaScript.html】 


<!DOCTYPE html> 

<html><body></body></html> 

<script> 
// Produce CSS style sheet. 
let ele = document .createElement ('style') ; 
document .head.appendChild(ele) ; 


ele.sheet .insertRule('header, aside, main, footer {padding: Spx ; box-sizing: border-box ;}', 0) ; 


ele.sheet.insertRule('header {color: RoyalBlue ; background-color: PowderBlue ; height: 
80px 7}', 1); 


ele.sheet.insertRule('aside {color: SeaGreen ; background-color: YellowGreen ; height: 
500px ; display: inline-block ;}', 2) ; 


ele.sheet.insertRule('main {color: Chocolate ; background-color: SkyBlue ; height: 500px ; 
display: inline-block ;}', 3); 


ele.sheet.insertRule('footer {color: LightSkyBlue ; background-color: Lavender ; height: 
50px ; text-align: center ;}', 4) ; 


1/1 

// Produce document-head elements with Javascript. 
let ref = document .createElement ('meta') ; 
ref.setAttribute('charset', 'utf-8') ; 


document .head.appendChild (ref) ; 


A 
ref = document .createElement ("meta') ; 


ref.setAttribute('name', 'viewport') ; 


ref.setAttribute('content', 'width=device-width, initial-scale=1.0') ; 
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else 
{ 
with (document .querySelector('aside') .style) 
{ 
width = '20%°' ; 
backgroundColor = 'YellowGreen' ; 
} 


with (document .querySelector ('"main') .style) 
{ 
width = '80%"' ; 
backgroundColor = 'SkyBlue' ; 
} 
} 


} 
</script> 


【相关 说 明 】 

<!DOCTYPE html> 

<html><body></body></html> 

原本 在 body 元 素 实例 中 的 各 子 元 素 实 例 对 应 的 HTML 源 代码 ， 均 会 被 改写 成 为 等 价 的 
JavaScript 源 代码 。 所 以 在 上 述 HTML 语法 里 的 body 元 素 实例 中 ， 可 看 出 并 未 内 含 任何 子 元 素 实 
例 。 


<script> 


// Produce CSS style sheet. 
let ele = document.createElement ('style') ; 


语句 声明 了 变量 ele, 其 初始 数据 为 document.createElement('style) 所 返回 的 新 的 style 元 素 实 
例 。 其 中 ，style 元 素 实例 即 是 对 应 到 各 个 CSS 规则 所 构成 的 样式 表 (style sheet) 。 

document .head.appendChild(ele) ; 

语句 将 变量 ele 所 代表 的 style 元 素 实例 ,新 增 至 当前 网 页 里 的 head 元 素 实 例 中 ， 以 调整 当前 网 
页 的 外 观 。 


ele.sheet .insertRule ('heagder, aside, main, footer {padding: 5px ; box-sizing: border-box ;}', 0) ; 


和 


语句 将 第 1 个 〈 索 引 值 为 0) CSS 规则 实例 【header，aside，main，footer {padding: 5px ; 
box-sizing: border-box ;} 】， 新 增 至 变量 ele 所 代表 的 style 元 素 实例 中 的 样式 表 (style sheet) 里 。 


ele.sheet.insertRule('header {color: RoyalBlue ; background-color: PowderBlue ; height: 
80px 72}', 1) ; 


此 语句 将 第 2 个 (索引 值 为 1) CSS 规则 实例 【header {color: RoyalBlue ; background-color: 
PowderBlue ; height: 80px ;} 】， 新 增 至 变量 ele 所 代表 的 style 元 素 实 例 中 的 样式 表 里 。 


ele.sheet.insertRule ('aside {color: SeaGreen ; background-color: YellowGreen ; height: 
500px ; display: inline-block ;}', 2) ; 


此 语句 将 第 3 个 (索引 值 为 2) CSS 规则 实例 【aside {color: SeaGreen ; background-color: 


i 
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YellowGreen ; height: 500px ; display: inline-block ;} 】， 新 增 至 变量 ele 所 代表 的 style 元 素 实例 中 的 
样式 表 里 。 
ele.sheet .insertRule (main {color: Chocolate ; background-color: SkyBlue ; height: 500px ; 
display: inline-block ;}', 3) ; 
此 语句 将 第 4 个 (索引 值 为 3) CSS 规则 实例 【main {color: Chocolate ; background-color: 
SkyBlue ; height: 500px ; display: inline-block ;} 】， 新 增 至 变量 ele 所 代表 的 style 元 素 实例 中 的 样式 
表 里 。 


ele.sheet.insertRule('footer {color: LightSkyBlue ; background-color: Lavender ; height: 
50px ; text-align: center ;}', 4) ; 


语句 将 第 5 个 (索引 值 为 4) CSS 规则 实例 【footer fcolor LightSkyBlue ; background-color: 
Lavender ; height: 50px ; text-align: center ;} 】， 新 增 至 变量 ele 所 代表 的 style 元 素 实 例 中 的 样式 表 里 。 


a 
// Produce document-head elements with Javascript. 
let ref = document .createElement ('meta') ; 


语句 声明 了 变量 ref， 其 初始 数据 为 document.createElement('meta') 所 返回 的 新 的 meta 元 素 


i 


oT 
实例 。 
ref.setAttribute('charset', 'utf-8') ; 


语句 使 得 变量 ref 所 代表 的 meta 元 素 实例 , 被 设置 了 属性 charset 和 其 数据 字符 串 'utf-8'， 进 
而 如 同 建立 了 meta 元 素 实例 【<meta charset="utf-8">】。 


document .head.appendChild(ref) ; 
语句 将 变量 ref 所 代表 的 meta 元 素 实 例 ， 新 增 至 当前 网 页 里 的 head 元 素 实例 中 ， 进 而 设置 
了 当前 网 页 的 编码 字符 集 (character set) 为 utf8， 以 正常 显示 各 国文 本 。 


1// 
ref = document .createElement ('meta') ; 


i 


i 


语句 将 document.createElement(meta) 所 返回 的 新 的 meta 元 素 实 例 ， 赋 给 了 变量 ref。 


ref.setAttribute('name', 'viewport') ; 


语句 使 得 变量 ref 所 代表 的 meta 元 素 实例 ， 被 设置 了 属性 name 和 其 数据 字符 串 "viewport， 
进而 如 同 建立 了 meta 元 素 实例 【<meta name="viewport">】。 


访 


ref.setAttribute('content', 'width=device-width, initial-scale=1.0') ; 


语句 使 得 变量 ref 所 代表 的 meta 元 素 实例 ， 被 设置 了 另 一 属性 content 和 其 数据 字符 
"width=device-width，initial-scale=1.0'， 进 而 如 同 建立 了 meta 元 素 实 例 【<meta name="viewport" 
content="width=device-width, initial-scale=1.0"> 】， 以 驱使 浏览 器 加 以 调整 【当前 网 页 呈现 在 其 窗口 
可 视 范围 / 视 口 (viewport) 】 时 的 如 下 特征 : 
日 依据 设备 (device ) 的 屏幕 宽度 (width )， 设 置 【当前 网 页 在 上 述 视 口 (viewport ) 里 了】 的 宽 
度 (width )。 
e 依据 100% (1.0 ) 的 初始 比例 (initial scale )， 设 置 浏 览 器 加 载 当前 网 页 时 的 显示 比例 。 


二 


三 
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document .head.appendcChild (ref) ; 
此 语句 将 变量 ref 所 代表 的 meta 元 素 实例 ， 新 增 至 当前 网 页 的 head 元 素 实例 中 ， 进 而 设置 了 
浏览 器 加 载 当前 网 页 的 显示 比例 。 


// Produce <title>...</title> 
document .title = 'Rewrite HTML to Javascript source code.' ; 


语句 将 字符 昌 


BB'Rewrite HTML to Javascript source code"， 赋 给 了 代表 当前 网 页 的 document 对 


象 实例 的 属性 title， 使 得 当前 网 页 的 标题 ， 成 为 了 【Rewrite HTML to Javascript source code.】。 


1// 


此 语句 


此 语句 


此 语句 ; 


ref.innerHTML = "Header' ; 
任 字 符 串 'Header， 赋 给 了 变量 ref 当前 所 代表 的 header 元 素 实例 的 属性 innerHTML， 
使 得 其 header 元 素 实例 带 有 【Header】 的 文本 ， 例 如 
document .body.appendchild (ref) ; 

将 变量 ref 当前 所 代表 的 header 元 素 实例 ， 新 增 至 body 元 素 实例 内 。 
document .createElement ('aside') ; 


将 document.createElement('aside") 所 返回 


ref = document .createElement ('header') ; 


尾 document.createElement('header") 所 返回 的 新 的 header 元 素 实 例 ， 


ref.innerHTML = "Menu' ; 


将 字符 串 'Menu'， 赋 给 了 变量 ref 当前 所 代表 的 aside 元 素 实例 的 


得 aside 元 素 实例 带 有 【Menu】 的 文本 ， 例 如 【<aside>Menu</aside>】。 


此 语句 ; 
ref = 


此 语句 | 


此 语句 ; 


符 字符 


属 document.createElement('main') 所 返回 


document .body.appendChild (ref) ; 
将 变量 ref 当前 所 代表 的 aside 元 素 实例 


document .createElement ('main') ; 


ref.innerHTML = 'Content' ; 


PIContent ， 赋 给 了 变量 ref 当前 所 代表 的 main 元 素 实例 的 


赋 给 了 变量 ref。 


【<header>Header</header>】 。 


的 新 的 aside 元 素 实例 ， 赋 给 了 变量 ref。 


属性 innerHTML， 使 


， 新 增 至 body 元 素 实 例 内 。 


的 新 的 main 元 素 实例 ， 赋 给 了 变量 ref。 


属性 innerHTML, 使 


得 其 main 元 素 实例 带 有 【Content】 的 文本 ， 例 如 【<main>Content</main>】。 


此 语句 ; 


梅 字符 


document .body.appendChild (ref) ; 


BFooter ， 赋 给 了 变量 ref 当前 所 代表 的 footer 元 素 实例 的 


赋 给 了 变量 ref。 


此 语句 将 变量 ref 当前 所 代表 的 main 元 素 实例 ， 新 增 至 body 元 素 实例 内 。 
ref = document.createElement ('footer') ; 

此 语句 将 document.createElement('footer) 所 返回 的 新 的 footer 元 素 实例 ， 
ref.innerHTML = 'Footer' ; 


属性 innerHTML, 使 
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得 footer 元 素 实例 带 有 【Footer】 的 文本 ,例如 【<footer>Footer</footer>】。 


document .body.appendChild (ref) ; 


此 语句 将 变量 ref 当前 所 代表 的 footer 元 素 实 例 ， 新 增 至 body 元 素 实 例 内 。 


/LA/ 
console.1og (document .head) ; 


此 语句 显示 出 可 展开 的 【<head>.…</head>】 的 信息 。 


21.3.2 ” JavaScript 源 代码 的 全 数 加 密 


在 互联 网 上 ， 不 少 网 站 提供 了 JavaScript 源 代码 的 加 密 应 用 。 读 者 可 以 操作 如 下 步 又， 以 获得 
加 密 之 后 的 JavaScript 源 代码 : 


@ ”将 前 一 示例 的 网 页 文档 ， 另 存 成 为 不 同 档 名 的 新 网 页 文档 。 

@ 将 【在 新 网 页 文档 里 ， 其 特定 script 元 素 实例 中 】 的 JavaScript 源 代码 ,全 数 复制 并 粘贴 至 【 
定 网 站 页 面 (例如 https://javascriptobfuscator.com/Javascript-Obfuscator.aspx ) 里 ， 其 加 密 应 用 】 
的 左 侧 文本 区 域 中 ， 再 单 击 上 述 网 站 页 面 里 的 加 密 按 钮 (例如 Obfuscate 按钮 )。 

@ 单 击 加 密 按钮 之 后 ， 若 无 任何 错误 信息 ， 则 将 【在 上 述 网 站 页 面 里 的 右 侧 文 本 区 域 中 ， 已 经 
加 密 完成 】 之 后 的 JavaScript 源 代码 ， 粘 贴 并 履 盖 至 原本 的 JavaScript 源 代码 。 

@ ”存储 并 调试 新 的 网 页 文档 。 


【21-3-2-encrypting-JavaScript-source-codes.html】 及 其 【相关 说 明 】 


<!DOCTYPE html> 

<html><body></body></html> 

<script> 

Var 0xc6f8=["\x73\x74\x79\x6C\x65","\x63\x72\x65\x61\x74\x65\x45\x6C\x65\x6D\x65\x6E\ 

X74","\x61\x70\x70\x65\x6E\x64\x43\x68\x69\x6C\x64", "\x68\x65\x61\x64","\x68\x65\x61\ 
X64\x65\x72\x2C\x20\x61\x73\x69\x64\x65\x2C\x20\x6D\x61\x69\x6E\x2C\x20\x66\x6F\x6F\x 
7T4\x65\x72\x20\x7B\x70\x61\x64\x64\x69\x6E\x67\x3A\x20\x35\x70\x78\x20\x3B\x20\x62\x6 
F\Xx78\x2D\x73\x69\x7A\x69\x6E\x67\x3A\x20\x62\x6F\x72\x64\x65\x72\x2D\x62\x6F\x78\x20 
\x3B\x7D", "\x69\x6E\x73\x65\x72\x74\x52\x75\x6C\x65", "\x73\x68\x65\x65\x74", "\x68\x65 
\x61\x64\x65\x72\x20\x7B\x63\x6F\x6C\x6F\x72\x3A\x20\x52\x6F\x79\x61\x6C\x42\x6C\x75\ 
Xx65\x20\x3B\x20\x62\x61\x63\x6B\x67\x72\x6F\x75\x6E\x64\x2D\x63\x6F\x6C\x6F\x72\x3A\x 
20\x50\x6F\x77\x64\x65\x72\x42\x6C\x75\x65\x20\x3B\x20\x68\x65\x69\x67\x68\x74\x3A\x2 
O\x38\x30\x70\x78\x20\x3B\x7D","\x61\x73\x69\x64\x65\x20\x7B\x63\x6F\x6C\x6F\x72\x3A\ 
X20\x53\x65\x61\x47\x72\x65\x65\x6E\x20\x3B\x20\x62\x61\x63\x6B\x67\x72\x6F\x75\x6E\x 
64\x2D\x63\x6F\x6C\x6F\Xx72\x3A\x20\x59\x65\x6C\x6C\x6F\x77\x47\x72\x65\x65\x6E\x20\x3 
B\x20\x68\x65\x69\x67\x68\x74\x3A\x20\x35\x30\x30\x70\x78\x20\x3B\x20\x64\x69\x73\x70 
\x6C\x61\x79\x3A\x20\x69\x6E\x6C\x69\x6E\x65\x2D\x62\x6C\x6F\x63\x6B\x20\x3B\x7D","\x 
6D\x61\x69\x6E\x20\x7B\x63\x6F\x6C\x6F\x72\x3A\x20\x43\x68\x6F\x63\x6F\x6C\x61\x74\x6 
5\x20\x3B\x20\x62\x61\x63\x6B\x67\x72\x6F\x75\x6E\x64\x2D\x63\x6F\x6C\x6F\x72\x3A\x20 
\x53\x6B\x79\x42\x6C\x75\x65\x20\x3B\x20\x68\x65\x69\x67\x68\x74\x3A\x20\x35\x30\x30\ 
X70\x78\x20\x3B\x20\x64\x69\x73\x70\x6C\x61\x79\x3A\x20\x69\x6E\x6C\x69\x6E\x65\x2D\x 
62\x6C\x6F\x63\x6B\x20\x3B\x7D", "\x66\x6F\x6F\x74\x65\x72\x20\x7B\x63\x6F\x6C\x6F\x72 
\x3A\x20\x4C\x69\x67\x68\x74\x53\x6B\x79\x42\x6C\x75\x65\x20\x3B\x20\x62\x61\x63\x6B\ 
X67\xX72\x6F\x75\x6E\x64\x2D\x63\x6F\x6C\x6F\x72\x3A\x20\x4C\x61\x76\x65\x6E\x64\x65\x 
72\x20\x3B\x20\x68\x65\x69\x67\x68\x74\x3A\x20\x35\x30\x70\x78\x20\x3B\x20\x74\x65\x7 
8\x74\x2D\x61\x6C\x69\x67\x6E\x3A\x20\x63\x65\x6E\x74\x65\x72\x20\x3B\x7D", "\x6D\x65\ 
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XTA4\xX61", "\x63\x68\x61\x72\x73\x65\x74", "\x75\x74\x66\x2D\x38","\x73\x65\x74\x41\x74\ 
XT4\xT2\x69\x62\x75\x74\x65", "\x6E\x61\x6D\x65","\x76\x69\x65\x77\x70\x6F\x72\x74","\ 
X63\x6F\x6E\x74\x65\x6E\x74", "\x77\x69\x64\x74\x68\x3D\x64\x65\x76\x69\x63\x65\x2D\x7 
T\x69\x64\x74\x68\x2C\x20\x69\x6E\x69\x74\x69\x61\x6C\x2D\x73\x63\x61\x6C\x65\x3D\x31 
\x2E\x30", "\x74\x69\x74\x6C\x65", "\x52\x65\x77\x72\x69\x74\x65\x20\x48\x54\x4D\x4C\x2 
O\x74\x6F\x20\x4A\x61\x76\x61\x73\x63\x72\x69\x70\x74\x20\x73\x6F\x75\x72\x63\x65\x20 
\x63\x6F\x64\x65\x2E","\x68\x65\x61\x64\x65\x72", "\x69\x6E\x6E\x65\x72\x48\x54\x4D\x4 
C","\x48\x65\x61\x64\x65\x72", "\x62\x6F\x64\x79", "\x61\x73\x69\x64\x65", "\x4D\x65\x6E 
\x75","\x6D\x61\x69\x6E","\x43\x6F\x6E\x74\x65\x6E\x74","\x66\x6F\x6F\x74\x65\x72","\ 
X46\X6F\x6F\x74\x65\x72","\x6F\x6E\x72\x65\x73\x69\x7A\x65", "\x69\x6E\x6E\x65\x72\x57 
\x69\x64\x74\x68", "\x31\x30\x30\x25","\x4C\x69\x67\x68\x74\x47\x72\x65\x65\x6E", "\x71 
\x75\x65\x72\x79\x53\x65\x6C\x65\x63\x74\x6F\x72", "\x44\x65\x65\x70\x53\x6B\x79\x42\x 
6C\x75\x65", "\x32\x30\x25", "\x59\x65\x6C\x6C\x6F\x77\x47\x72\x65\x65\x6E","\x38\x30\x 
25","\x53\x6B\x79\x42\x6C\x75\x65"] ;let ele=document{[ 0xc6f8[1]] 

(_Oxc6f8[0]);document [_0xc6f8[3]] [_0xc6f8 [2]] (ele) ;ele[_0xc6f8[6]][_0xc6f8[5]] (_Oxc6f 
8[4],0) ;ele[_0xc6f8[6]] [_0xc6f8[5]] (_0xc6f8[7],0) ;ele[_0xc6f8[6]][_0xc6f8[5]] (_0xc6f8 
[8] ,0);ele[ Oxc6f8[6]][ Oxc6f8[5]]( Oxc6f8[9],0);ele[ Oxc6f8[6]][ Oxc6f8[5]]( Oxc6f8[ 
10] ,0) ;let 

ref=document [ Oxc6f8[1]]( Oxc6f8[11]);ref[ Oxc6f8[14]]( Oxc6f8[12], Oxc6f8[13]); 
document[ Oxc6f8[3]][_ Oxc6f8[2]] (ref);ref= document[ Oxc6f8[1]] ( Oxc6f8[11]); 

ref[ Oxc6f8[14]] ( Oxc6f8[15], Oxc6f8[16]);ref[ Oxc6f8[14]]( Oxc6f8[17], Oxc6f8[18]);d 
ocument[ Oxc6f8[3]][ Oxc6f8[2]] (ref) ;document[ Oxc6f8[19]]= Oxc6f8[20];ref= 
document[ Oxc6f8[1]] (_0xc6f8[21]) ;ref[_0xc6f8[22]]= _0xc6f8[23] ;document [_0xc6f8[24]] 
[_0xc6f8[2]] (ref);ref= document{[ Oxc6f8[1]]( Oxc6f8[25]);ref[l Oxc6f8[22]]= 0xc6f8[26]; 
document[ Oxc6f8[24]] [_0xc6f8[2]] (ref) ;ref= document[_0xc6f8[1]] (_0xc6f8[27]); 

ref[ Oxc6f8[22]]= _0xc6f8[28] ;document [_0xc6f8 [24]] [_0xc6f8[2]] (ref);ref= document 
[_0xc6f8[1]] (_0xc6f8[29]);ref[_0xc6f8[22]]= _0xc6f8[30] ;document[_0xc6f8[24]] 
[_0xc6f8[2]] (ref);window[_0xc6f8[31]]= change size;change size();function change_size() 
{if(window[_0xc6f8[32]]<= 768) {with (document[_0xc6f8[35]] (_0xc6f8[25]) [_0xc6f8[0]]) 
{width= _0xc6f8[33];backgroundColor= _0xc6f8[34]};with(document [_0xc6f8[35]] 

( 0xc6f8[27])[ 0xc6f8[0]]){width= 0xc6f8[33];backgroundColor= 0xc6f8[36]}}else 
{with(document[_0xc6f8[35]] (_0xc6f8[25]) [_0xc6f8[0]]){width= 0xc6f8[37]; 
backgroundColor= 0xc6f8[38]};with(document[ 0xc6f8[35]]( Oxc6f8[27])[ 0xc6f8[0]]) 
{width= _0xc6f8[39];backgroundColor= _0xc6f8[40]}}} ; 


以 上 元 长 的 JavaScript 源 代码 ， 是 经 过 加 密 之 后 的 JavaScript 源 代码 ， 并 且 可 以 实现 【 
个 示例 的 网 页 文档 】 相 同 的 功能 和 画面 ! 


</script> 


21.4 练 习 题 


1. 编写 必要 的 HTML 和 CSS 源 代码 ， 以 实现 如 下 布局 的 网 页 : 
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100 
窗口 的 剩余 宽度 
像素 二 
| logo header 
| navigation 
topic 
menu 
content extra 
| footer 
窗口 宽度 窗口 宽度 
| 65% 
的 20% 帘 中 涡 庚 的 83% 的 15% 


80 像素 


30 像素 
30 像素 


550 像素 


40 像素 


其 中 ， 在 上 述 布局 中 ， 其 各 个 元 素 实例 的 属性 id 的 数据 (例如 footer) ， 即 是 如 同 以 上 各 块 


内 的 文本 (例如 【<div id="footer">...</div>】) 。 


2. 进一步 通过 CSS 媒体 查询 的 语法 ， 改 写 第 1 题 的 源 代码 ， 使 得 浏览 器 窗口 的 宽度 ， 不 足 768 
像素 时 ， 则 在 当前 网 页 上 ， 除 了 属性 id 的 数据 为 logo' 的 div 元 素 实例 之 外 ， 请 垂直 排列 均 占 用 浏览 器 


窗口 的 总 宽度 的 其 余 各 块 元 素 实例 。 


3. 试 改写 第 2 题 中 的 CSS 媒体 查询 (media query) 相关 的 源 代码 ， 成 为 等 价 的 JavaScript 源 


代码 。 


4. 试 改写 第 3 题 中 的 剩余 的 CSS 源 代 码 ， 成 为 具有 同样 效果 的 JavaScript 源 代码 。 


第 1 章 


1. 
9 个 版 本 。 


2 

HTML 和 CSS。 

了 

browser 或 web browser。 

4. 

ActionScript 和 JScript。 

有 

机 器 代码 、 源 代码 、 编 程 语言 、 语 法 、 子 程序 、 变 量 、 常 量 
6. 

汇编 器 、 编 译 器 和 解释 器 。 
7. 


color = "Gold' ; 
backgroundColor = 'DodgerBlue' ; 
fontSize = "1.5em' ; 


8. 


let i=0; 

eS 

++ 

Count++ 了 

Sum += count * 1 ** 2 


9 


message、subject、greeting 和 object。 


和 调用 。 
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10. 


常量 、 变 量 、 函 数 返回 值 和 子 表达 式 。 


11. 


!、()、>、11、>= 和 &&。 


12. 


15、30、75、90、180、2、5 和 770。 


14. 


=xl^2+yl*3+6' 和 /ra-zRA-2]l\d/g。 


result = sphere(56) ; 


15. 


仅 有 catchup。 


16. 


按 下 快捷 键 Ctrl + Shift + 工 或 Ctrl + Shift + J。 


第 2 章 


1. 


770、Math.PI、'Nice Day'、"good"、/\w\s\d/g 和 /.\w.\d/ 均 是 常量 的 一 种 。 
请 特别 留意 其 大 小 写字 母 ! 剩余 的 项 目 均 不 是 内 置 的 常量 。 


2 


const 


3. 


const 


4. 


love_your_forever = 261314 ; 


love_me_longer = 2591.8 ; 


全 局 变量 : value01、value02、str01、str02。 
局 部 变量 : data、identity、result、amount、price、output。 


到 小 


E 要 表达 式 : 


【Math.PI】 和 【Math.pow(r，3)】。 
2 个 不 同 的 左 侧 表达 式 : 【sphere volume =】 和 【Math.】。 
1 个 箭头 函数 表达 式 : 【r => 4 / 3 * Math.PI * Math.pow(r, 
4 个 算术 表达 式 : 【4 / 3 * Math.PI * Math.pow(r, 3)】、[4 /3 * Math.PI】、 
【Math.PI * Math.pow(r，3)】、 【4 / 3]】。 


【sphere volume =r => 4/3*Math.PI * Math.pow(r，3)】、 


3)】。 
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整数 13。 


9. 

整数 27。 
10. 

整数 1036。 
11. 

整数 51。 
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1 和 


rating = Score < 60 ? 'failed' : score < 80 ? 'passed' : score <= 100 ? "nice' : 'error' ; 


或 


rating = 
score < 60 ? 'failed'" 
score < 80 ? 'passed' 


score <= 100 ? "nice' : 'error' ; 
$9 
此 处 列举 出 6 种: number、string、object、boolean、undefined 和 function。 


1 
二 进 制 的 语法 : (25.75).toString(2)。 

八进制 的 语法 : (25.75).toString(8)。 

十 六 进 制 的 语法 : (25.75).toString(16)。 

或 

先 编写 【let num01 = 25.75 ;】 的 语句 ， 再 编写 如 下 相关 语法 : 
@ 二进制 的 语法 : num01.toString(2)。 

@ ”八进制 的 语法 : num01.toString(8)。 

@ 十 六 进 制 的 语法 : num01.toString(16)。 


2. 
0b1l10111011.toString(16) 

parseInt ('110111011"，2) .toString(16) 
Number('0b110111011') .toString(16) 

3. 

(0b101100011100 + 001275 + 0x51cf) .toString(2) 

4. 
3*X#y2+2*#((X-1)*#2)#y 二 2*Xyysy2 二 SSYy9y3 
3 


varresult = product.item01[1] + product.item02[1] + product.item03[1] + product.item04[1] + 
product.item05[1] ; 


或 
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Var result = 0 ; 


for (item in Product) 

result += product [item] [1] ; 

} 

6. 

NaN: 代表 【并 非 数 值 (not a number)】 的 含义 。 
Infinity: 代表 【无 穷 值 】 的 含义 。 

undefined: 代表 特定 名 称 【未 (被 ) 定义 】 的 含义 。 
Ts 

303。 

8. 


Var price = 72583000 ; 
Var cnf cn = Int1.NumberFormat ('cn', {style: 'currency', currency: 'cny'}) ; 


console.log(cnf cn.format (price)) ; 


9. 
先 编写 【letx = 768 ;】， 再 编写 下 面 其 中 一 个 语句 : 
consolei09tr ** (EE 和) 


console.log (Math.pow(x, 1 / 3)); 


10. 


! price < 300 && ! amount >= 10 
! (price < 300 || amount >= 10) 


11. 

访问 25: arr[1][0][0]。 

访问 40: arr[1][1][1]。 

访问 60: arr[2][1][1]。 

12. 

访问 '"browser: 【obj.product.en】 或 【obij['product']['en']】。 
访问 ' 谷 歌 : 【obj.developer.cn】 或 【obj[rdeveloper][cn]】 。 
访问 'free': 【obj.price.en】 或 【obj[price][en]】。 

1 


let message = “`S${profile.name} now lives on ${profile.planet}.. ; 


14. 


console.1log('Apple: ll\nBanana: 15\nGuava: 23') ; 


15. 


console.log(Date()) ; 
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1. 
让 语句 的 版 本 : 


switch 语句 的 版 本 : 
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for 语句 的 版 本 : 


for…of 语句 的 版 本 : 


for…in 语句 的 版 本 : 
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for 语句 的 版 本 ， 


while 语句 的 版 本 了 
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do…while 语句 的 版 本 : 
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5 
生成 器 的 版 本 : 


生成 器 函数 的 版 本 : 
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1. 
其 最 大 正 整 数 ，1.7976931348623157 X 10?08。 

其 最 大 安全 整数 : 23 - 1， 也 就 是 9007199254740991。 
2 

3. 

2.220446049250313 X 1016。 
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第 7 章 


1. 
分 别 返回 7、23 和 19。 可 参考 如 下 源 代码 : 
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下 
方式 1: 
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第 13 章 


第 14 章 


和 
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backgroundColor = "GoldenRod' ; 


padding = '5px' ; 
margin = '10px' ; 
fontSize = '30px' ; 
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ki 

div01.className = 'color03 border02 background01' ; 

或 

div01.classList = 'color03 border02 background01' ; 

或 

div01l.setAttribute('class', 'color03 border02 background01') ; 

和 

console.1og (document.images.length) ; 

或 

console.1og (document .querySelectorAll('img') .length) ; 

3 

document .body .onclick = null ; 

其 中 ， 上 述 的 原始 常量 null， 可 被 置换 成 原始 常量 undefined 或 者 空 字符 串 "。 

4. 

console .1log (document .querySelectorAll('a[href]') .length) ; 

请 留意 ， 并 不 是 所 有 a 元 素 实例 ， 均 为 超 链接 ! 举例 来 说 ，HTML 语法 【<a name 
点 ， 而 HTML 语法 【<ahre 全 "…">…</a>】 才 是 超 链接 。 

5. 


></a>】 是 锚 


console.1log (document .body.children.length) ; 


location.href = 'http://www.tup.tsinghua.edu.cn/index.html' ; 
或 
location = 'http://www.tup.tsinghua.edu.cn/index.html' ; 


和 


history.go(1) ; 
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4. 


Object.keys()、 Object.values() 、Object.create() 、Array.from()、 Array.of()、Array.isArray()、 
Number.isInteger()、 Number.isNaN()、 Number.isSafeInteger()、 String.fromCharCode()、 String.fromCodePoint() 


5. 
(1) 

语句 【t01._proto .proto .display() ;】 可 调用 到 类 Shape 的 函数 display()。 
(2) 

语句 【t01.display() ;】 可 调用 到 类 Triangle 的 函数 display()。 
(3) 


改写 成 为 如 下 类 Triangle 的 定义 语法 : 


class Triangle extends Shape 
{ 
display() 
{ 
super.display() ; 


console.log('display Triangle message...') 7 


} 
} 
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1 
在 代表 运算 符 【--】 之 处 ， 会 导致 语法 错误 〈syntax error) 。 


2. 

不 会 发 生 任何 异常 错误 ! 

内 

在 第 2 个 符号 【.】 之 处 ,会 导致 语法 错误 (syntax error) 。 
4 


在 名 称 【num08】 之 处 ， 会 导致 参考 错误 (reference error) ， 因 为 num08 尚未 被 定义 。 
3 


class InputError 
{ 
constructor (message) 
{ 
this.message = message ; 
} 
} 


class DivisionError 
{ 
constructor (message) 
{ 
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